![]()
네비게이션 용어 네비게이션 바(Navigation Bar)의 위치에 따라 부르는 이름 GNB Global Navigation Bar 사이트의 모든 페이지에서 공통으로 사용하는 메뉴바 주로 화면 상단에 위치하며, 메인 메뉴, 최상위 메뉴라고 한다 LNB Local Navigation Bar 소메뉴, GNB의 상세 메뉴로써 동작한다 서브메뉴라고 하며 페이지들과 직접 링크가 걸려있다(상세페이지 메뉴) SNB Side Navigation Bar 사이드 메뉴, 왼쪽이나 오른쪽에 두는 메뉴 FNB Foot Navigation Bar 하단 메뉴, 회사에 대한 소개 페이지링크 카피라이트 링크
![]()
Position 속성 Layout 배치 속성 요소의 위치에 대한 설정 속성 position을 설정하더라도 기본 display 속성은 유지된다 static 기본 위치 해당 요소가 위치했어야하는 곳에 자연스럽게 배치된다. absolute 절대 위치 기준위치는 Position 속성을 받은 부모요소의 레이아웃 상하좌우 네 벽면을 기준으로 삼는다. 부모요소가 position 속성이 아니라면 첫 화면을 기준으로 위치가 지정된다. relative 상대 위치 기존에 자기가 표현되어야하는 위치의 좌측상단지점을 기준으로 이동 기존 해당 요소가 존재했어야하는 공간이 유지된다 다른 태그가 해당 공간을 사용하지 않고 비워둔다, 상대 위치 박스는 이동시키지 않고 사용한다 absolute박스의 부모 요소가 된다. fixed 고정 ..
![]()
Inline - Block 모델 Inline 모델과 Block 모델의 표현방식이 섞인 것 내부 동작은 블록모델 요소의 자체 레이아웃 width, height, border, margin, padding 모두 적용 가능 외부 동작은 인라인모델 외부 요소와의 관계에 대한 레이아웃 블록모델처럼 한 줄을 다 차지하지 않는다. 인라인요소처럼 한 줄에 여러 요소 배치가 가능하다. 자체 레이아웃 width, height 설정 가능 부묘요소에 맞추려면 width: 100% 로 설정 내용물 크기에 맞추려면 height: auto 값으로 설정 margin-top, margin-bottom 설정 가능 margin-left, margin-right 설정 가능 외부 요소와의 간격으로 사용되며 인라인모델처럼 동작한다
![]()
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 : 줄 간격(줄 높이) 속성, 텍스트가 들어..
![]()
id, class 속성 Global Attribute, 공용 속성이다. 모든 태그들이 다 가지고 있는 속성 id 속성 HTML 문서에서 각 요소들을 구분하기 위해 사용한다. HTML 문서에서 id들은 고유한 값으로 부여되어야 한다. CSS를 적용하거나 JS Event 처리코드를 적용할 때 사용한다. '#' 기호와 연계해서 사용한다. class 속성 태그들을 그룹지을 때 사용한다 여러 태그 요소들에게 같은 클래스 값을 적용하여 같은 그룹으로 표현한다. 같은 클래스 값을 가진 태그들에게 공통적인 스타일을 적용할 수 있다. 선택자, Selector HTML 문서에서 특정 요소를 선택하는 CSS 문법 선택한 요소들에게 일괄적으로 같은 스타일을 적용할 수 있다. 선택자의 종류 전체 선택자 모든 태그..
![]()
테이블 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의 약자 문단을 표현하는 태그이다. 공백문자(띄어쓰기, 탭, 개행)이 개별적으로 ..
