본문 바로가기

코딩 공부/HTML + CSS

(16)
[HTML+CSS] 17_Position 속성 position 속성(1) #01. Position 속성 개요 1) Position 속성 어떤 요소의 위치를 자유자재로 이동하기 위한 방법을 결정한느 속성. margin이나 padding처럼 다른 요소와의 영향에 따른 배치가 아닌, 다른 요소의 위에 떠 잇는 상태로 이동하게 되므로 Position 속성이 부여된 요소를 레이어라고 부르기도 한다. CSS의 Position 속성은 Float 속성으로 레이아웃을 결정한 다음 각 요소의 디테일한 위치를 지정해주기 위하여 사용된다. 2) 값의 종류 값 설명 static 기본값. HTML 요소가 자신에게 주어진 원래의 위치에 배치되도록 한다. relative 상대위치. HTML요소가 자신에게 주어진 원래의 위치를 기준으로 이동하도록 지정한다. absolute 절대위..
[HTML+CSS] 15_Float속성 Float 속성 #01. Float 속성의 기본 특성 1) Float 속성 Float속성은 뉴스 페이지와 비슷하다. 이미지나 박스를 화면의 우측 혹은 좌측에 고정시켜 놓고 텍스트가 그 옆에 흐르듯이 지나가도록 하는 것을 Floating 처리라 한다. 이 때 사용되는 속성이 float속성이다. Float 속성은 Block-Level 요소를 부모 박스 안에서 왼쪽이나 오른쪽에 고정시키는 것이 원래의 기능이지만, 다른 박스들과 함께 Floating처리를 하게 되면 다양한 효과를 얻을 수 있다. 2) Float 속성에 적용할 수 있는 값 값 설명 float: left; 요소를 부모 박스 안에서 왼쪽에 고정시킨다. float: right; 요소를 부모 박스 안에서 오른쪽에 고정시킨다. float: inherit;..
[HTML+CSS] 14_Display 속성 Display 속성 #01. display 속성의 기본 이해 1) Block-Level 과 Inline-Level의 차이 요소 값 설명 Block-Level display: block block레벨요소의기본값.이 속성이적용되면해당 요소는width와height를적용할수 있다. 이 요소는하나의문단으로처리되기때문에,태그 다음에나타나는요소는자동으로줄 바꿈된다. Inline-Level display:inline; inline레벨 요소의 기본값. 이 속성이 적용되면 해당 요소는 width와 height를 부여하더라도 적용되지 않는다. 이 요소는 하나으 ㅣ단어나 강조 구문처럼 인식되기 때문에, 태그 다음의 요소는 줄 바꿈 되지 않는다. 공통 display:none; 이 속성이 적용된 요소는 화면상에 표시되지 않는다...
[HTML+CSS] 12_박스에효과주기 박스에 효과 주기 #01. Overflow 속성의 사용 1) Overflow 속성 부모 요소에서 자식이 벗어날 경우 어떻게 처리할 지에 대한 방법을 명시하는 속성 지정 가능한 값의 종류 값 설명 visible 기본값. 벗어나는 내용이 부모 요소를 벗어나도록 그대로 둔다. scroll 벗어나는 내용에 대하여 스크롤 처리한다. 이 속성이 부여되면 부모 요소는 항상 스크롤바의 트랙을 표시한다. hidden 벗어나는 내용에 대하여 화면에 표시되지 않도록 잘라낸다. auto 내용이 벗어나지 않을 경우에는 박스의 기본 모양대로 표시되지만, 내용이 벗어날 경우에는 scroll처리 된다. 01-Overflow.html visible scroll hidden auto 출력결과 #02.크기에 대한 최대/최소값 지정하기 1..
[HTML+CSS] 11_CSS박스모델 css 박스 모델 #01. 박스의 기본 크기 1) 박스의 기본 크기를 결정하는 특성 가로축 - 부모를 가득 채운다. 세로축 - 자신이 포함하고 있는 내용만큼 설정된다. 내용이 없을 경우, 높이가 형성되지 않는다. 01- 박스의기본크기.html 빨간 박스 파랑 박스 출력결과 #02. 박스의 크기를 구성하는 속성 1) 박스의 크기를 구성하는 속성의 종류 속성 설명 적용값 width 내용 영역의 가로 폭 px단위, %단위 height 내용 영역의 세로 높이 px단위, %단위 border 박스의 테두리 굵기 종류 색상 padding 테두리와 내용영역 사이의 여백 여백 사이즈에 대한 px단위 2) 박스의 크기를 구성하는 속성간의 관계 3) border 속성 border: 굵기 종류 색상; 굵기: px단위 값을 지..
[HTML+CSS] 10_문단관련속성 문단 관련 속성 #01. 문단 관련 속성 1) 문단 관련 속성의 종류 속성 설명 적용값 예시 text-align 텍스트의 가로축 정렬 left | center | right text-indent 첫 번째 줄에 대한 들여쓰기 px 단위 값 text-decoration 밑줄, 윗줄, 취소선, 깜빡임 효과 none(기본값) | underline | over-line | line-through | blink vertical-align 어떠한 요소를 기준을 ㅗ한 세로축 위치 top | middle | bottom letter-spacing 글자간의 간격 (자간) px 단위 값 word-spacing 단어간의 간격 (어간) px 단위 값 white-space 줄 바꿈 속성 제어 normal | nowrap 2) 텍..
[HTML+CSS] 09_폰트관련속성 폰트 관련 속성 #01. 글자 관련 속성 1) 글자 관련 속성의 종류 속성이름 설명 적용값 예시 font-family 글꼴 이름을 지정한다. “굴림”, “돋움”, “궁서” font-size 글자 사이즈를 지정한다. 12px, 12pt, 0.8em, 120% 등 font-style 글자의 기울임을 지정한다. italic, normal font-weight 글자의 굵기를 지정한다. normal, bold, 100~900까지의 100단위 값 등 line-height 한 줄의 높이를 지정한다. 30px, 120% 등 color 글자 색상을 지정한다. #ff6600, orange 등 2) 글꼴 지정 속성 font-family: "돋움", "굴림", "바탕"; “font-family”는 콤마(,)로 구분하여 여러 ..
[HTML+CSS] 08_CSS구체성단위 CSS 구체성 단위 #01. 복잡한 형태의 셀렉터 1) 다양한 CSS 조합 방식 CSS의 셀렉터를 표현하기 위한 조합방식은 CSS2를 기준으로 하여 약 30여가지가 존재하며, HTML5에서 새롭게 약 30여개가 추가되었다. CSS 셀렉터의 조합 기법 모두가 jQuery에서 요소에 접근하기 위한 방법으로 사용된다. 2) CSS 셀렉터의 주요 조합 형태 복수 지정 셀렉터 à 콤마(,)로 구분하기 가상클래스 자식셀렉터 -> ‘’>‘’로 구분하기 자손 셀렉터 -> 공백(“ “)으로 구분하기 속성셀렉터 -> HTML 태그의 속성에 따른 구분 HTML5의 새로운 가상 클래스 -> nth-child와 target 3) “>”로 구분한 구조적 표현-자식셀렉터 “>”는 HTML의 계층 구조의 표현을 의미한다. A > B..