![]()
table 모델 display: table; table의 레이아웃 외부 레이아웃은 블록과 유사 width 설정 가능 적용하지 않은 내용물(table-cell)들의 너비만큼 영역을 가진다(Auto) height 설정 가능 적용하지 않은 내용물(table-row)들의 높이만큼 영역을 가진다(Auto) padding 설정 가능 table의 테두리와 table-cell들의 테두리 사이 공간이 넓어짐 margin 설정 가능 table의 외부여백 tr tr 태그는 padding, margin 둘 다 적용해도 변화가 없다 tr 태그는 width는 적용 안되고 Height는 적용된다. td, th td, th 태그는 padding 적용 가능, margin은 적용 안된다. td, th 태그는 width, height 둘..
![]()
시맨틱 레이아웃, Semantic Layout 시맨틱 태그(Semantic Tag) 웹페이지의 레이아웃 구조를 쉽게 이해할 수 있도록 이름을 붙인 것 태그의 이름을 확인하면 HTML 문서의 구조를 대략적으로 짐작할 수 있도록 한다. 검색엔진(robots)이 페이지의 구성을 파악할 수 있도록 해준다. 대표적인 태그의 종류 header 사이트 소개, 로고 등의 머리글 지정 nav Navigation, Navigator, 메뉴 모든것을 통칭함 동일한 도메인(사이트)내에서 다른 문서로 연결하는 링크들의 모음 aside 사이드바 광고, 배너, 작은 메뉴 등 본문이외의 내용을 표시하는 곳 section 실제 문서 내용, 본문 등을 다루는 컨텐츠 영역 주제별 카테고리 역할 article section 카테고리 내에서..
![]()
inline 모델 block 모델 요소의 내부 컨텐츠로 표현되는 요소 컨텐츠(내용물)만큼만 영역을 차지한다 컨텐츠가 부모 요소의 너비를 초과하면 새 행으로 줄바꿈한다. border를 설정하면 border도 같이 줄바꿈이 되므로 테두리가 깨진 것처럼 보일 수 있다. 인라인 요소에 border를 설정할 때에는 반드시 화면에 적용된 상황을 확인할 것 인라인 요소끼리는 같은 줄에 여러 개 배치할 수 있다. 자체 레이아웃 width, height : 속성이 적용되지 않는다. 내용물에 맞춰 컨텐츠 영역의 크기가 결정된다. margin : left, right 만 적용되고 top, bottom 은 적용되지 않는다, 서로 만나면 겹쳐지지 않고 밀어낸다. line-height : 줄 간격(줄 높이) 속성, 텍스트가 들어..
![]()
CSS 박스 모델 화면에 배치되는 태그 요소를 어떻게 표현할 것인지 설정하는 속성 display 속성으로 설정한다 width, height border padding, margin 위 다섯가지 속성이 박스 모델에 따라 표현되는 방법이 달라진다 block 모델 영역을 설정하고 공간을 차지하는 요소 너비의 기본 설정이 부모요소의 크기만큼(100%) 되어있다. 컨텐츠(내용)의 크기가 block 요소보다 커지면 넘치는 부분이 발생한다. 컨텐츠가 넘친 부분에 대한 표현방법으로 Overflow 속성을 사용한다. 종결 block 요소 h1 ~ h6, p, caption, dt, address, blockquote 등등 종결 블락요소는 다른 블락요소를 자식대그로 가질 수 없다 인라인 요소만 컨텐츠로 포함할 수 있다. ..
![]()
CSS 스타일 적용 우선순위 선택자 우선순위 아이디 선택자 클래스/속성/가상 선택자 태그 선택자 전체 선택자 스타일 적용방법에 따른 우선순위 !important 인라인 임베디드 @import link link 태그 안에 적용된 @import(이건 적용하지 않는게 좋다.) 브라우저의 기본 스타일 레이아웃 흐름 속성(요소 배치) float 요소를 배치하는 방향을 지정하는 속성 floating의 약자이다. 레이아웃을 구성할 때 사용하는 속성이다. 흐름 방향을 지정하는 속성값 left : 왼쪽 right : 오른쪽 none : float 하지 않음. 이미지와 텍스트(p 태그)를 한 줄에 배치하기 위해 사용되는 속성, 이미지를 이동시킬 수 있도록(Flaoting할 수 있도록) 만들고 그 자리를 텍스트가 배치될 수..
![]()
id, class 속성 Global Attribute, 공용 속성이다. 모든 태그들이 다 가지고 있는 속성 id 속성 HTML 문서에서 각 요소들을 구분하기 위해 사용한다. HTML 문서에서 id들은 고유한 값으로 부여되어야 한다. CSS를 적용하거나 JS Event 처리코드를 적용할 때 사용한다. '#' 기호와 연계해서 사용한다. class 속성 태그들을 그룹지을 때 사용한다 여러 태그 요소들에게 같은 클래스 값을 적용하여 같은 그룹으로 표현한다. 같은 클래스 값을 가진 태그들에게 공통적인 스타일을 적용할 수 있다. 선택자, Selector HTML 문서에서 특정 요소를 선택하는 CSS 문법 선택한 요소들에게 일괄적으로 같은 스타일을 적용할 수 있다. 선택자의 종류 전체 선택자 모든 태그..
![]()
CSS 색상 단위 색상 이름 영문 표기 black, red, blue, gray, green... RGB RED, GREEN, BLUE 세가지 색상의 조합(빛의 삼원색)으로 표현하는 방식 R, G, B에 해당하는 각 값을 0255 또는 0%100%로 표현 RGB(R, G, B) 로 표현한다. rgb(100%, 0%, 100%) -> 마젠타 RGBA RGB + Alpha 의 약자이며 투명도(Transparent)가 추가 된 것. 투명도를 0.0(투명) ~ 1.0(불투명) 의 수치로 표현한다. rgb(0, 255, 255, 0.5) -> 반투명 Cyan(옥색, 청록색) rgb(r, g, b, a) / rgba(r, g, b, a) 둘 다 상관없이 값만 넣어준다면 알맞게 적용된다. 16진수 표현법, Hexad..
![]()
CSS 레이아웃 화면에 표현될 요소를 배치하는 작업 어떤 요소를 어디에 어떻게 배치할 것인가에 대한 전략 태그의 모양을 설정하고 배치될 위치, 다른 요소들과의 관계 등을 지정한다. 태그의 기본적인 영역(공간)의 크기 width : 컨텐츠 영역의 너비 height : 컨텐츠 영역의 높이 padding : 내부 여백 border : 테두리 margin : 외부 여백 CSS 여백 태그 요소를 감싸고 있는 투명한 공간 padding(내부여백), margin(외부여백) 으로 구성한다. 내부여백, 외부여백 둘 다 top, right, bottom, left로 구성된다. 설정 방법 padding과 margin 둘 다 설정 방법이 똑같다. ex) margin 기준으로 작성하였으며 padding, margin 둘 다 크..
![]()
CSS 크기 단위 고정 크기 단위 주변요소(부모요소)의 크기에 영향받지않고 일정한 크기를 유지하는 단위 px : 픽셀, 화소 단위, 정확한 크기나 위치를 설정할 때 사용한다. in : 인치, 설정되어있느 수치를 따라간다(픽셀 수로 설정되어 있다. 1in = 96px) pc : 파이카라고 한다, 1/6in == 16px pt : 포인트라고 한다, 1/12pc == 1/72in cm : 센티미터, 2.54cm == 1in mm : 밀리미터, 1/10cm 고정 단위라고하지만 현실의 크기와는 다르다. 가변 크기 단위 주변요소(부모요소)에 비례한 상대적인 크기를 지정하는 단위 % : 퍼센트, 태그 요소가 들어갈 수 있는 공간에서의 비율(부모 요소의 크기에 영향을 받는다.) em : 엘리먼트의 약자(단순히 em이라..
![]()
CSS, Cascading Style Sheets HTML, XHTML, XML 등의 마크업 언어(Markup Language)가 화면에 표현되는 방법(스타일, 모양)을 기술하는 언어 부모태그에 스타일을 적용하면 자식태그도 해당 스타일이 적용된다. CSS를 HTML에 적용하는 방법 인라인(Inline) 방식 HTML 태그의 style속성을 이용하여 스타일을 적용하는 방법 장점 : 태그를 보면서 스타일을 지정할 수 있다. 단점 : 각각의 태그에 스타일을 일일히 적용해야하기 때문에 관리가 힘들어진다. 임베디드(Embedded) 방식 head 태그 내에 style 태그를 생성하고 그 안에 작성한다. CSS 선택자(Selector)를 이용한다. 장점 : HTML 문서에 적용된 모든 스타일을 한번에 확인할 수 있..
![]()
테이블 table tr, th, td caption, thead, tbody, tfoot 표를 표현하는 태그 table : 표를 만들 때 사용하는 태그, 자식태그들로 행과 열을 표현한다. tr : Table Row, 테이블의 각 행을 표현한다. th : Table Head, 테이블의 제목을 나타낸다(한 칸, 한 개의 열) td : Table Data, 테이블의 데이터를 나타낸다(한 칸, 한 개의 열) caption : 테이블의 이름, 간단한 설명을 작성한다. (테이블 상단 바깥쪽에 위치한다.) thead : Table Header, 테이블의 머리글, 코드의 위치에 상관없이 테이블의 최상단 행으로 고정 tbody : Table Body, 테이블의 본문내용, thead 와 tfoot 의 사이에 들어가게 된다..
![]()
DTD, Document Type Definition DOCTYPE 문서 유형 정의 브라우저에게 해당 문서가 어떤 유형의 문법을 적용해서 작성되었는지 알리는 문장 버전에 맞게 유효성검사(문법 검사)를 할 수 있게 된다. 브라우저가 DTD를 확인하고 문서를 확인하는 방법을 결정한다. HTML 5 XML(eXtensible Markup Language) - 가끔씩 사용할 예정 DTD를 적용하면 문법이 적용된다. XHTML XHTML 1.0 XHTML 1.1 나는 사용하지 않는다.
![]()
태그의 기본 영역(레이아웃) 속성 block div(division) h1~h6 p ol ul 등 block의 요소들은 한 줄 전부를 차지하는 영역 속성을 가지고 있다. 화면에서 일부 영역을 차지하면서 구역 설정을 담당한다. 화면의 전체적인 구조를 구성할 때 사용된다. inline span a img 내용물(컨텐츠)의 영역을 나타내는 속성, 컨텐츠를 표현하기 위한 태그로 사용된다. block 요소의 내부에 포함시켜 작성한다. 태그없이 사용된 단순 텍스트도 inline 요소처럼 처리한다. 글자 관련 태그 h1 ~ h6 heading 태그라고 한다. 제목 표현 태그 h1이 제일 크고 h6로 갈수록 작아진다. p Paragraph의 약자 문단을 표현하는 태그이다. 공백문자(띄어쓰기, 탭, 개행)이 개별적으로 ..
![]()
Front - End, 화면 구현의 구성 요소 HTML - 웹 화면의 구조(골격)를 구성하는 언어 CSS - 화면의 스타일(모양)을 지정하는 언어 JavaScript - 화면의 동작을 정의하는 언어 HTML Hyper Text Markup Language 의 약자 HyperLink - 하이퍼링크가 적용된 문서(다른 문서와 연결된 문서) Markup Language - Tag를 사용하여 문서나 데이터의 구조를 나타내는 언어 웹페이지에서 정적인 구조를 표현하는 언어 웹페이지의 골격을 개발하는 언어이다. 웹 UI 레이아웃(Layout)을 구성한다. Tag를 이용하여 개발하는 언어이다. Tag란? 와 로 구성되어 있다. w3schools.com / 참고하기 좋은 사이트 , 태그 : HTML문서의 최상위 태그, ..
![]()
태그의 기본 영역(레이아웃) 속성 block div(division) h1~h6 p ol ul 등 block의 요소들은 한 줄 전부를 차지하는 영역 속성을 가지고 있다. 화면에서 일부 영역을 차지하면서 구역 설정을 담당한다. 화면의 전체적인 구조를 구성할 때 사용된다. inline span a img 내용물(컨텐츠)의 영역을 나타내는 속성, 컨텐츠를 표현하기 위한 태그로 사용된다. block 요소의 내부에 포함시켜 작성한다. 태그없이 사용된 단순 텍스트도 inline 요소처럼 처리한다. 글자 관련 태그 h1 ~ h6 heading 태그라고 한다. 제목 표현 태그 h1이 제일 크고 h6로 갈수록 작아진다. p Paragraph의 약자 문단을 표현하는 태그이다. 공백문자(띄어쓰기, 탭, 개행)이 개별적으로 ..
