주요 선택자

주요 선택자 1. 전체 선택자 - 스타일을 모든 요소에 적용할 때 사용 - * (별표)를 사용 HTML5 웹 프로그래밍 h1 {background-color: lightseagreen;} /* 마진과 패딩을 0으로 설정하여 브라우저 창에 바짝 붙게 함*/ * { margin: 0; padding: 0; } 2. 태그 선택자 - 특정 태그가 쓰인 모든 요소에 스타일을 적용 제목 타이틀 소제목 타이틀1 내용내용내용내용내용내용내용.... 소제목 타이틀2 내용내용내용내용내용내용내용.... h2 {color: blue;} /* p 선택자를 정의하면 웹 문서의 모든 p 요소들에 스타일이 적용됨 */ p { font-size: 12px; margin-left: 20px; } 3. 클래스 선택자 - 특정 부분에 스타일..

• format_list_bulleted Front-End Study/HTML+CSS
• · 2022. 10. 10.
• textsms

position 속성

● position 속성 - 요소의 위치 형식을 지정 - position: absolute | fixed | relative | static | inherit - absolute : 절대 위치 좌표 설정 - fixed : 브라우저 창 기준으로 죄표를 고정 - relative : 문서의 흐름 상 있던 위치를 기준으로 좌표를 지정 - static : 문서의 흐름 상 위치 (기본 값) - inherit : 부모 태그의 속성 값을 상속받음

• format_list_bulleted Front-End Study/CSS 사전
• · 2022. 10. 9.
• textsms

주석처리

주석처리 1. HTML의 주석처리 - 로 주석처리함 2. CSS의 주석처리 - /* */ 로 주석처리함 3. Javascript의 주석처리 - // 로 주석처리함

• format_list_bulleted Front-End Study/HTML+CSS
• · 2022. 10. 6.
• textsms

position 속성 정리

position 속성 정리 1. position 속성 정리 (백과사전 바로가기) - 요소의 위치 형식을 지정 - position의 종류는 4가지가 존재 - absolute - fixed - relative - static 2. absolute - 절대 위치 좌표 설정 - 문서의 흐름과 관계없이 top, right, bottom, left 속성 값을 이용해 요소를 원하는 위치에 배치 /* 박스의 크기 설정 */ .box { position: absolute; width: 100px; height: 100px; background-color: #0094ff; } /* position 설정 */ #crd1{top: 0; left: 0;} #crd2{top: 0; right: 0;} #crd3{bottom: 0..

• format_list_bulleted Front-End Study/HTML+CSS
• · 2022. 10. 4.
• textsms

목록 관련 태그

● ul, li 태그 - 순서 없는 목록 생성 - 태그를 사용하고 태그 안에 태그를 사용해 각 항목을 표시함 ● ol, li 태그 - 순서 있는 목록 생성 - 태그를 사용하고 태그 안에 태그를 사용해 각 항목을 표시함 - - type 속성 : 순서의 종류 - 1 : 숫자(기본값) - a : 영문 소문자 - A : 영문 대문자 - i : 로마숫자 소문자 - I : 로마숫자 대문자 - start="시작 번째 수" 속성 : 중간 번호부터 시작 가능 - reverse 속성 : 항목을 역순으로 표기 ● dl, dt, dd 태그 - 설명 목록 생성 - 태그 : 목록 - 태그 : 제목 - 태그 : 설명

• format_list_bulleted Front-End Study/HTML 사전
• · 2022. 10. 4.
• textsms

노멀라이즈

노멀라이즈 (Normalize) 1. 노멀라이즈 - HTML 요소의 기본 스타일을 브라우저 간 일관성을 유지하기 위해 적용시킴 2. a 태그의 노멀라이즈 - 기본일 때, 밑줄이 있고 색이 파랑색임 (링크로 바로가기) - 노멀라이즈 적용 시, 밑줄과 색이 바뀜 ※ inherit : 부모의 스타일을 적용 링크로 바로가기 3. body의 노멀라이즈 - 기본일 때, 약간의 margin이 들어감 Hello!!! - 노멀라이즈 적용 시, magin이 사라짐 Hello!!! 4. ul, li의 노멀라이즈 - 기본일 때, 점과 여백이 있음 메뉴 아이템 1 메뉴 아이템 2 메뉴 아이템 3 - 노멀라이즈 적용 시, 점과 여백이 사라짐 메뉴 아이템1 메뉴 아이템2 메뉴 아이템3

• format_list_bulleted Front-End Study/HTML+CSS
• · 2022. 9. 29.
• textsms