[HTML] 동위 선택자

개념 - 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자 - 태그를 기준으로 할 때 모든 태그는 동일한 위치에 있는 동위 상태임 - 선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택 - 선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 선택 예제 1 Header - 1 Header - 2 Header - 2 Header - 2 Header - 2 예제 2 Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[HTML] 문자열 속성 선택자

개념 1. 기본 속성 선택자 - [속성이름] 선택자 - [속성이름="속성값"]선택자 2. [속성이름] 선택자 - [속성이름] 선택자는 특정 속성을 가지고 있는 요소를 모두 선택한다. 3.[속성이름="속성값"]선택자 - [속성이름="속성값"] 선택자는 특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택한다. 4. 문자열 속성 선택자 (1) [속성이름~="속성값"] 선택자 - 특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택 (2) [속성이름|="속성값"] 선택자 - 특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택 (3) [속성이름^="속성값"] 선택자 - 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 ..

[CSS] CSS 예제

예제 1 - 두 번째 p 태그에는 글자크기 100% - 세 번째 p 테그에는 글자크기 150% - 네 번째 p 태그에는 글자크기 200% Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 예제 2 - 두 번째 p 태그에는 글자크기 1배 - 세 번째 p 테그에는 글자크기 1.5배 - 네 번째 p 태그에는 글자크기 2배 Lorem ipsum dolor si..

[CSS] CSS 예제

예제 1 제목 글자 태그 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum ..

[HTML] 아이디 선택자 익히기 & menu 메뉴바 생성하기

1. 아이디 선택자 익히기 - 공간 분할 태그에 id 선택자를 사용하여 id 속성을 적용하고 레이아웃을 구성한다. - 아래의 이미지를 html로 구현한다. Header Aside Content 2. ul 구현 - menu1 - 아래의 이미지를 ul로 구현한다. Home News Contact About 3. ul 구현 - menu2 - 아래의 이미지를 ul로 구현한다. Home News Contact About Note: If a !DOCTYPE is not specified, floating items can produce unexpected results. A background color is added to the links to show the link area. The whole link ar..

[CSS] CSS 설명 예시

CSS를 적용하는 방법 HTML 문서에 CSS 스타일을 적용할 때에는 다음과 같이 세 가지 방법을 사용할 수 있다. 1. 인라인 스타일(Inline style) HTML 태그의 style 속성에 CSS 코드를 넣는 방법 2. 내부 스타일 시트(Internal style sheet) HTML 문서 안의 안에 CSS 코드를 넣는 방법 3. 외부 스타일 시트(External style sheet) 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법 스타일 적용의 우선순위 위에서 설명한 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정된다. 1. 인라인 스타일 (HTML 요소 내부에 위치함) 2. 내부 / 외부 스타일 시트 (HTML 문서의 head 요소 내..

[HTML] table 태그 예제

예제 1 회원가입 이름 아이디 비밀번호 비밀번호 확인 이메일 취미 독서 요리 조깅 수영 취침 전공 국어 영어 수학 디자인 전화번호 SKT KT LG 예제 2 Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglunds snabbköp Christina Berglund Sweden Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Königlich Essen Philip Cramer Germany Laughing Bacchus Winecellars Yoshi Tannamuri ..

[HTML] 시멘틱 구조 태그

HTML5 Header Menu - 1 Menu - 2 Menu - 3 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. 서울특별시 강서구 내발산동 시멘틱 구조 태그 헤더 의미 네비게이션 의미 사이드에 위치하는 공간 의미 여러 중심 내용을 감싸는 공간 의미 글자가 많이 들어가는 부분 의미 푸터 의미

[HTML] 공간 분할 태그 div & span

예시 1 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 예시 2 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum div & span 태그 block 형식으로 공간 분할(차곡차곡 쌓아 올려지는 형식) inline 형식으로 공간 분할(한 줄 안에 차례차례 위치하는 형식)

[HTML] fieldset 태그 & legend 태그

입력 양식 이름 이메일 fieldset & legend 태그 입력 양식을 설명할때는 fieldset 태그와 legend 태그를 사용한다. legend 태그는 fieldset 태그 안에만 사용할 수 있다.(다른 곳에도 사용 가능하지만 아무런 효과가 없음)