CSS공부01/div/header/section/footer

안녕하세요 핸들링코드 크루의 박준영입니다.

오늘은 웹공부중에 정말 어려운 css를 공부해볼 생각입니다.

환경은 익숙하신 에디터를 사용하시면 되는데 저는  BRACKET을 사용해볼게요!

간단하게 Bracket을 소개하자면 깔끔한 개발 공간지원과 빠른 인터페이스를 통해

웹개발시 좋더라구요!! 특히 통합개발환경이라는 점!

위 코드를 보면 html코드인데요 header, section, footer부분으로 나누어

시멘틱 적인 html을 제작할 수 있습니다.

저 코드는 현재 부분에 대한 정의라고 할 수 있습니다.

html에서는 div를 가장많이 사용하는데 각 부분을 나눌때 div를 사용해 나누게 됩니다. 

한번 코드를 실행해볼게요

html 코드로만 이루어진 웹페이지 입니다 되게 칙칙합니다.

여기에 간단한 css를 입혀서 살짝 바꿔볼게요

일단 css를 넣을 부분에 클래스를 넣어주세요.

처음으로 메뉴에 있는 머리말 기호를 없앨거에요

list-style : none;를 사용해줍시다.

아! css 사용법은 .(클래스이름) { (css내용) } 이런 방식입니다.

menu css를 바꾸려면

 .menu { list-style: none; } <--- 이렇게 해주면 되죠!

머릿말 기호를 없앴어요 이제 조금 빨리 해보겠습니다.

이렇게 css를 넣은 화면 을 보여드릴 게요

저는 border태그를 통해서 부분의 크기를 가늠해보았어요

text-decoration: none; 는 <a>태그에서 아래 밑줄이 나오는걸 지울 수 있습니다.

padding은 글자를 두고 상하좌우의 여유공간을 나타냅니다 padding과 margin을 잘 알아야 하는데

padding은 한 공간의 크기를 넓히는 역할을 하고, margin은 한 공간과 다른 공간의 여백을 나타냅니다.

태그에 대한 자세한 설명은 다음시간에!!