04-14 수업 내용 복습

코드 수업

 

BNX웹페이지 만들기

-----------------------------------------------------------------------------------------------------------------------

타이틀 만들기

 

BNX

 

TITLE은 혼자 라인을 사용하기 때문에 display: block;

화면 중앙에 배치하기 위해서 text-align: center; 을 사용해야한다.

text-align을 사용하기 위해서 타이틀을 tag로 감싼다.

(text-align은 text에게만 적용된다.)

font-size, font-weight를 사용해서 크기를 조절한다.

-----------------------------------------------------------------------------------------------------------------------

메뉴 만들기 

 

| BRAND | VISUAL | STYLE | MEDIA | NEWS | STORE | CUSTOMER |

 

|와 이름 사이 공백을 추가해야한다.

 

공백을 추가하기 위해서는   를 추가하거나

메뉴를 tag로 감싸서 width를 주어서 공백을 추가해야한다.

후자가 더 좋은 방법.

 

전체를 태그로 감싸고 나서

font-size, font-weight를 조절하고

 

BRAND,VISUAL,STYLE,MEDIA,NEWS,STORE,CUSTOMER만 각각 태그로 감싸준다.

 

이름을 감쌀 때 사용하는 tag는

display: inline-block;가 기본인 tag를 사용하거나

display: block; 가 기본인 tag를 css를 통해서 display: inline-block;로 변환하여 사용한다.

display: inline-block;를 사용하는 이유는 text-align을 사용하기 위해서이다.

display: inline-block;은 글자 취급을 한다.

 

이름을 감싼 태그에 width 값을 넣어 공백을 준다.

 

메뉴에 하이퍼링크를 넣어주기 위해서는 이름을 감싼 태그의 자식 태그로 a 태그를 넣어 준다.

하이퍼 링크는 기본으로 text-decoration: underline; 로 되어있기 때문에 밑줄이 생긴다.

그렇기 때문에 text-decoration: none; 를 사용해서 밑줄을 없앨 수 있다.

 

 

*주의* 그냥 a태그로 감싸서 사용하는건 X 다른 태그로 감싼뒤 링크가 필요하면 a태그만 넣는 식으로 작성

-----------------------------------------------------------------------------------------------------------------------