html

HTML의 기초(4) - <label> 엘리먼트

이번 포스팅에서는 html의 엘리먼트 중 엘리먼트에 대해 알아보도록 하자. 엘리먼트 엘리먼트에 대한 설명을 하기에 앞서 body 영역에 엘리먼트와 엘리먼트를 생성하여 다음과 같은 모양을 만들어 주도록 하자. css style sheet에는 기본 세팅값으로 모든 엘리먼트에 margin: 0; 와 padding: 0;를 적용하도록 하자. ( 기본적으로 모든 margin 값과 paddding 값을 0으로 설정한 후 내가 원하는 데로, 입맛 데로 움직이는 것이 효율적이고 편하다. ) check /* CSS style sheet */ *{ margin:0; padding:0; } 위에 보이는 것처럼 엘리먼트의 속성 type="checkbox"에 의해 체크박스가 만들어 졌고 엘리먼트에 의해 "check"라는 글자가..

CSS 응용(1) - 햄버거 버튼(메뉴바) 만들기

이번 포스팅에서는 css를 활용해 메뉴바를 만들어 보고자 한다. 웹페이지 상에서 마우스 커서에 반응하여 움직이는 메뉴바를 많이 본 적이 있을 것이다. 아래와 같이 생긴 메뉴바 혹은 버튼을 일명 "햄버거 버튼" 이라고 하는데 이 버튼을 클릭했을 때 세부 메뉴 항목들이 나올 수 있게끔 html과 css 코드를 작성해 보고자 한다. 위의 그림처럼 메뉴바를 클릭했을 때 세부 메뉴 영역이 표출되면서 메뉴바의 모양이 X 모양으로 변하는 효과를 넣어보고자 한다. 과정을 따라가면서 새롭게 등장하는 css 속성들은 그때 그때 언급하면서 알아가보도록 하자. 우선 첫째로 햄버거 버튼 모양을 만들어야 하는데, 필자는 다음과 같은 과정을 통해 만들었다. div영역을 만들고 을 이용해 높이 5px 짜리 선들을 만들어서 각각의 위..

CSS skills(2) - 속성 선택자 , display:none; , input[id=" "]:checked{ } , 인접 접근자 + , :nth-child

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

CSS skills(1) - display, float, position

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

HTML 응용(1) - element들 간의 관계, 이미지 삽입하기

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