css에서 display 속성은 무슨 역할을 할까요? 모든 엘리먼트는 사각형의 형태를 가지고 있다고 이전 시간에 배운 것이 기억나시나요? display속성은 그 사각형이 어떻게 작동될지를 정해주는 속성입니다. 태그와 태그를 비교할 때 태그는 display의 속성값이 block이고, 태그는 inline이라고 설명한 적이 있습니다. 그림을 보면서 복습하기 위의 링크를 누르시고 그때 설명했던 그림을 보시면 block과 inline이 공간을 어떻게 차지하는지 바로 확인할 수 있습니다. 그리고 그때 배우지 못했던 속성값들을 좀 더 살펴보도록 하겠습니다. display이 값에 none이라는 값을 준다면 해당 엘리먼트는 사라집니다. div-1 div-2 div-3 위의 소스코드를 태그 사이에 넣어주세요. 그리고 실행..
오늘 배울 것은 마진과 보더 그리고 패딩입니다. 테두리는 직관적으로 쉽게 이해가 가실테지만 마진과 패딩에 대해서는 헷갈리는 분들이 많으실 겁니다. 우선 마진은 엘리먼트와 엘리먼트의 사이 여백을 뜻합니다. 마진에 값을 주면 그 만큼의 거리만큼 다른 엘리먼트와의 거리가 멀어지는 것입니다. 그리고 테두리는 말 그대로 엘리먼트의 경계선을 나타냅니다. 컨텐츠는 우리가 실제로 태그 사이의 쓴 글 등이 나타나는 부분입니다. 그리고 패딩은 테두리와 컨텐츠 사이에 있는 여백을 나타내는 말입니다. 한 개의 엘리먼트가 있어도 바깥쪽부터 안쪽까지 마진-보더-패딩-컨텐츠라는 네 부분으로 구성됩니다. 코드를 작성하면서 어느 공간을 넓히거나 좁힐 때 그 부분이 정확히 어느 부분인지 파악하는 것이 중요합니다. 다른 엘리먼트와의 거리..
어떤 CSS속성들을 배워야 할까요? 모든 속성을 다 배울 필요는 없습니다. 자주 쓰이는 것들은 알아두고 혹시 필요한 기능이 있으면 그때 그때 배워나가면 됩니다. 어떤 속성들을 자주 쓰는 지 알아볼까요? 자주 사용하는 CSS 속성 확인하기 위의 링크로 들어가면 MS에서 자주 사용하는 CSS 속성들을 조사한 그래프를 볼 수 있습니다. 일단은 여기서 나오는 상위의 속성들을 우선 알아두시면 충분합니다. 오늘의 수업도 여기에 기반해 시작하도록 하겠습니다. font-size는 글씨의 크기를 조절하는 속성이고, text-align은 글씨를 정렬할 때 사용하는 속성입니다. font 16 font 32 위의 소스코드를 복사해서 실행해 주세요. 두 개의 태그가 있고, 각각에 one과 two라는 아이디를 주었습니다. #on..
선택자를 배웠으니 css를 사용하는 방법을 배워보도록 하겠습니다. css셀렉터를 적고 괄호 안에 속성과 값을 적으면 css가 적용됩니다. 속성과 값은 콜론으로 구분하고, 한 가지 효과가 끝나면 세미콜론으로 마무리합니다. 지금의 그림은 태그 전부에 배경색을 검은색으로 바꾸고, 글자색은 흰색으로 바꾼 것입니다. 정리하자면, css셀렉터 { css속성 : 값 ; } 이라는 형태가 됩니다. 그럼 css효과를 가진 문서는 어떤 형태를 가지게 될까요 ? p{ color : blue; } #first { color : red; } .second { color : green; } div span{ background-color: black; } css 문서는 위와 같은 형태가 됩니다. 한 페이지를 꾸민다는 것은 많은 ..