순이코딩/Web (10) 썸네일형 리스트형 [Web] CSS 태그(4) - box 모델 / margin, padding / radius / background / position / z-index / overflow / float ■ box 모델 박스 모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법입니다. 박스 모델의 요소는 콘텐츠 영역, 패딩, 테두리, 마진 등의 요소로 구성되어 있습니다. 웹 문서에서 개발자도구를 보면 이렇게 박스모델의 형태를 볼 수 있습니다. 웹 페이지의 레이아웃 및 디자인 설계 시 사용합니다. 콘텐츠 영역의 크기는 width와 height로 조정할 수 있으며 마진(margin), 패딩(padding)은 top right bottom left로 값을 줄 수 있습니다. *{ margin-top: 0; margin-left: 0; } 이렇게 속성에서 선택해 값을 줄 수도 있고, margin 또는 paddig 속성에서 한 번에 값을 다르게 줄 수 있습니다. *{ margin: 50px 0 0 20px; } 이.. [Web] CSS 태그(2) - 계층선택자, 사이즈, hover와active, display ■ 계층선택자 계층 선택자는 특정 위치의 요소를 계층적 구조를 통해 선택하는 것입니다. 계층선택자는 위 그림에서 A를 기준으로 B를 선택할 때 사용하는 선택자를 말합니다. 자손은 자식뿐 아니라 자식의 자식까지 포함하므로 A의 자식뿐만 아니라 자식의 자식까지 모두 B로 포함되어 있는 것을 볼 수 있습니다. 자손선택자를 통해 선택할 때는 띄어쓰기를 사용합니다. A B{ 속성 : 값; } 자식선택자는 > 기호를 통해 사용합니다. A>B{ 속성 : 값; } 근접후행선택자와 후행선택자는 같은 계층끼리입니다. 근접은 바로 옆에 있는 계층의 요소만, 후행선택자는 같은 계층 전체입니다. 근접후행선택자는 +기호를 사용하고, 후행선택자는 ~ 기호를 사용합니다. A+B{ 속성 : 값; } A~B{ 속성 : 값; } 이와 별.. [Web] CSS 태그(1) - CSS란, 스타일 시트, 기본 선택자 1. CSS(Cascading Style Sheets)란? CSS(Cascading Style Sheets)는 HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일 시트 언어입니다. HTML에서도 디자인적인 요소를 추가해 웹 문서를 작성할 수 있지만 CSS를 따로 사용하는 이유는 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있기 때문입니다. 웹 문서의 내용과 디자인이 구분되어 있으면 내용을 수정할 때에도 디자인에 전혀 영향을 미치지 않고 반대의 경우도 마찬가지로 내용에는 전혀 영향을 미치지 않고 디자인만 수정할 수 있기 때문에 편리합니다. 또한 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있기 때문에 CSS를 사용합니다. 2. 스타일 시트 스타일 시트 작성.. [Web]HTML 태그(2) - 하이퍼링크, 이미지, 폼 1. 하이퍼링크 ■ 태그와 href속성, target속성 하이퍼링크를 삽입할때는 기본적으로 태그와 href속성을 사용합니다. a는 anchor의 줄임말입니다. 다음은 태그의 기본형입니다. 텍스트 또는 이미지 링크한 주소를 여는 방법을 정하기 위해서 target속성을 사용합니다. target을 self로 할 경우엔 현재 페이지에서 링크를 열고(기본값. 설정을 안해도 현재 페이지에서 열립니다) blank로 할 경우에는 새 탭에서 링크를 열게 됩니다. ※ 앵커태그 속성 속성 이름 설명 href hypertssxt reference로 연결할 주소 지정 name 문서 내 특정 위치 이동 target 링크된 내용이 열릴 대상 - _blank : 링크 클릭 시 새 창 설정 - _self : 현재와 동일한 브라우저 창.. 이전 1 2 3 다음
