이번 포스팅에서는 속성 선택자, display:none; , input[ ]:checked{ }, 인접 접근자 + , :nth-child( )에 대해 알아보도록 하자. 속성 선택자 display: none; input[id=" "]:checked { } 인접 접근자 + :nth-child( ) 이번에 알아볼 내용은 css 속성 선택자이다. 지금껏 우리가 사용해 왔던 선택자들을 살펴보면 다음과 같다. * : 모든 엘리먼트를 선택하는 선택자 element name (div, body, a, ul, li, ... ) : 직접적으로 특정 엘리먼트를 그대로 적는 방식의 선택자. . : class를 부여해준 엘리먼트를 선택하는 선택자. # : id를 부여해준 엘리먼트를 선택하는 선택자. 속성 선택자는 주로 inpu..

이번 포스팅에서는 html에 css를 적용할 때 자주 사용하는 다양한 속성들에 대해 알아보도록 하자. display : inline-block; float position 기타 는 기본적으로 블록 속성을 가지고 있다. 그렇기 때문에 안에서 컨텐츠를 정렬하려고 할 때 인라인(inline) 속성을 가지고 있는 을 사용할 것이라고 생각할 수 있다. 하지만 실상은 그렇지 않다. 인라인 속성을 가지고 있을 경우 컨텐츠의 넓이와 높이 지정이 불가능하다. 인라인 속성은 기본적으로 자기가 가지고 있는 크기만큼의 영역만을 차지하기 때문에 넓이와 높이를 지정해 줄 수 있는 를 주로 사용해서 정렬을 한다. 이때 사용하게 되는 css가 바로 display: inline-block; 이다. 의 블록 속성을 인라인 속성으로 변환..

이번 포스팅에서는 앞서 배웠던 html 엘리먼트들을 활용하는 법에 대해 다루도록 하겠다. 엘리먼트들 간의 관계 이미지 삽입하기 엘리먼트들 사이의 관계에 대해 얘기하기 전에 우선 다음과 같은 코드로 html과 css를 작성하였다고 하자. 안녕하세요 환영합니다. /* CSS style sheet */ *{ margin:0; } #wrap{ background: red; height:500px; width:500px; } #header{ background: yellow; height:250px; width:250px; } 해당 코드를 실행한 결과는 아래와 같은 모습을 띠고있다. 앞서 배웠던 것처럼 엘리먼트 안에 두개의 를 작성 할 경우 페이지에 두개의 영역이 블럭 속성으로 자리잡게 된다. 그렇다면 두개의 를..

이번 포스팅에서는 css를 작성할 때 사용되는 문법에 대해 간략히 짚고 넘어가보자. html과의 비교를 통해 css의 문법에 대해 간략히 알아보자. html에서 속성값을 넣을 때는 queryString의 형태를 띤다. 여기서 queryString 형태란 key=value의 형태를 띠고 있는 것을 말한다. html의 엘리먼트에서 속성을 부여할 때 다음과 같이 작성하게 된다. 반면 css의 경우, object 형태와 비슷한 형태를 띠고 있다. (css가 object인 것은 절대 아니다. 단지 형태가 비슷할 뿐) css 생성 형태는 queryString과는 다른 형태로 key : value 형태를 띠고 있다. 또한 css에서는 따옴표" "를 사용하지 않고 끝에 세미콜론(;)이 붙는다. 아래의 코드를 보면 쉽게..

css를 잘하기 위해서는 속성과 속성값들을 많이, 그리고 정확히 아는 것이 중요하다. 이번 포스팅에서는 css의 속성들에 대해 살펴보자. CSS의 width와 height CSS의 margin CSS의 padding padding과 margin의 차이점 정리 설명을 진행하기에 앞서 아래와 같이 작성된 html 파일과 css 파일이 존재한다고 하자. 해당 코드의 실행 결과를 참조하여 css의 속성들에 대해 알아보도록 하겠다. 1 2 3 /* CSS style sheet */ /* width height margin 과 padding */ #header{ background:red; height:60px; } #visual{ background: blue; height:250px; margin-bottom:..