[CSS] 속성의 상속

부모 자식 관계 Header h1 Header p // style.css 문서 header { color: red; } h1 { color: blue; } p { color: green; } 부모 자식 관계 : 와 , 형제 관계 : 과 원하는 지역에만 CSS 속성 적용 Header h1 Header p Footer h1 Footer p // style.css 문서 header { color: red; } header h1 { color: blue; } header p { color: green; } 원하는 지역에만 css 속성을 적용하기 위해 부모를 구체적으로 표기한다.

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[CSS] CSS 선택자 - Type / Class / ID

선택자 HTML의 어떤 요소에 CSS를 적용할 것인가 Type (태그) / Class (태그 별명) / ID (태그 이름) Type 선택자 // Type Hello World 특정 태그에 스타일을 적용 Class 선택자 // Class Hello World 클래스 이름으로 특정 위치에 스타일을 적용 ID 선택자 // ID Hello World ID를 이용하여 스타일을 적용 클래스보다 선택자 우선순위가 높음

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[CSS] CSS란 / CSS 구성 요소 / CSS 연동방식

CSS란? Cascading Style Sheet 정보(HTML)와 디자인(CSS)의 분리 문서의 레이아웃과 스타일 정의 HTML로 작성된 정보를 꾸며주는 언어 CSS 구성 요소 선택자 { 속성 : 속성값; } h1 { font-size: 20px; font-family: sans-serif; color: blue; background-color: yellow; text-align: center; } 선택자 디자인을 적용할 HTML 영역 속성 어떤 디자인을 적용할지 정의 속성값 어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;) 필수 입력 CSS 연동 방법 세 가지 Inline Style Sheet coding 101 태그 안에 직접 원하는 스타일을 적용 Internal Style Sheet 태그 안에..

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[HTML/CSS] Block 요소와 Inline 요소

Block 요소와 Inline 요소 Hello Elice Hello Elice Hello Elice Bye Elice Bye Elice Bye Elice 두 요소를 구분 짓는 세 가지 주요 특징 줄바꿈 현상 가로-세로 상-하 배치 Block 요소 Hello Elice Hello Elice Hello Elice y축 정렬 형태로 출력 (줄바꿈 현상 나타남) 공간을 만들 수 있고, 상하 배치 작업 가능 대표 예시) 태그, 태그 Inline 요소 Bye Elice Bye Elice Bye Elice x축 정렬 형태로 출력 (한 줄에 출력) 공간을 만들 수 없고, 상하 배치 작업 불가능 대표 예시) 태그 Block 요소의 특징 태그가 대표적 줄바꿈 현상이 나타남 width / height 값 사용 가능 -> 공..

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[HTML] 구조를 잡을 때 사용하는 태그

HTML 태그 구성 요소 목차 / 본문 / 부록 목차 홈 전체 목록 태그 웹사이트의 머리글을 담는 공간 태그 메뉴 버튼을 담는 공간 (navigation) , , 와 함께 사용 본문 ... ... 태그 문서의 주요 내용을 담는 태그 IE(Internet Explorer)는 지원하지 않으므로 role="main" 속성 필수 입력 태그 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그 태그 내에 구역을 대표하는 타이틀 태그가 존재해야 함. 부록 주소 : 서울특별시 OO구 OO로 이메일 : email@xxxxxx.xxx 사업자등록번호 : xxx-xx-xxxxx 대표 : ooo 태그 가장 하단에 들어가는 정보를 표기할 때 사용 기타 태그 임의의 공간을 만들 때 사용

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[HTML] HTML 기본 태그

HTML이란? 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어 HTML의 변화 시간이 지남에 따라 자주 사용되지 않는 용어들은 사라지고 시대에 맞추어 새로운 신조어가 등장 HTML 태그 구성 요소 컨텐츠 .태그명 : HTML이 가지고 있는 고유의 기능. 형태로 입력 .컨텐츠 열린 태그와 닫힌 태그 사이에 있는 내용물 .속성 HTML 태그가 갖고 있는 추가 정보 .속성값 어떤 역할을 수행할지 구체적인 명령을 진행하는 것 HTML 문서의 기본 구조 HTML5라는 신조어로 문서를 선언하는 태그 ... HTML 문서의 시작과 끝을 의미 모든 HTML 태그들은 태그 안쪽에 입력 웹사이트의 간단한 요약 정보를 담는 영역 웹사이트에서 노출되지 않는 정보 ... 웹사이트에서 눈에 보이는 정보를 담..

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms