Frontend/CSS10 04. CSS Reset ○ Reset의 필요성 (스타일 초기화) - 브라우저들은 각각 다른 기본 스타일을 가지고 있기 때문에 같은 CSS 스타일을 적용해도 화면에 출력되는 모습이 다를 수 있다. 이런 문제를 해결하기 위해서 스타일을 모두 초기화해서 동일하게 만든 뒤 CSS 스타일을 추가하면 브라우저와 상관없이 같은 화면이 출력되게 만들 수 있는데 이를 reset이라고 한다. ○ Reset 하는 법 - 보통 reset.css 파일을 하나 저장해두고 import하여 사용 Welcome to the Jungle Welcome to the Hotel California Welcome to the Black Parade - 많이 참조하는 reset 파일 ① Eric Meyer's "Reset CSS" : https://meyerweb... 2022. 3. 29. 03. 다양한 선택자(Selector) ○ 전체 선택자 (*) - 현재 HTML 내의 모든 요소에 스타일 적용하기 - 형식 : *{속성: 속성값; 속성: 속성값;} *{ font-family: 궁서체; font-size: 40px; font-style: italic; font-weight: bold;} ○ 태그 선택자 - 지정된 태그에는 모두 스타일 적용하기 - 형식 : 태그{속성: 속성값; 속성: 속성값;} p{/* 모든 요소 */ font-family: 굴림체; font-size: 20px; font-weight: bolder;} ○ 클래스 선택자 - 지정된 클래스에는 모두 스타일 적용하기 - 형식 : .클래스명{속성: 속성값; 속성: 속성값;} .hide{ width: 0; height: 0; margin: 0; padding: 0; f.. 2022. 3. 28. 02. CSS 스타일을 적용하는 3가지 방법(Inline CSS, Internal CSS, External CSS) ○ Inline CSS - 스타일을 적용할 부분의 여는 태그 안에 바로 적용 - 형식 : style="속성1: 속성값; 속성2: 속성값; ..." HTML 삽입 미리보기할 수 없는 소스 ○ 선택자(Selector) - 스타일을 적용하기 위한 대상 - HTML요소를 사용할 수도 있고 ID, Class의 형태로 정의할 수도 있다 - 유형 ① 태그(HTML 요소) ② #선택자 이름 : 본문에 적용할 때 id="선택자이름" (선택자이름을 한번만 적용할 수 있다) ③ .선택자 이름 : 본문에 적용할 때 class="선택자이름" (선택자이름을 여러번 적용할 수 있다) ○ Internal CSS - 내부 스타일 시트(internal CSS) : HTML 문서 안에 태그로 해당 문서에서 사용할 스타일을 정리 - 보통 .. 2022. 3. 28. 01. CSS 기본문법 ○ UI 구현 표준(WEB)의 구성요소 ① 웹표준 : 웹기술을 표준화하기 위한 일련의 단계와 요구사항 ② 웹접근성 : 어떠한 사용자, 어떠한 기술 환경에서도 사용자가 전문적인 능력없이 웹사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것 ③ 웹호환성 : 서비스 이용자 단말기의 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스를 제공하는 것 ○ 웹(WEB)의 3요소 ① 구조 : HTML ② 표현 : CSS ③ 동작 : Java Script, 웹 프로그래밍 언어(JSP, ASP, PHP, Python 등) ○ CSS ; Cascading Styles Sheets - 웹 문서의 표현, 서식, 일관성 유지 - 명령어는 대소문자를 구분한다 - 종결문자 ; - 주석 : 여러줄 /* */ , 1줄.. 2022. 3. 28. 이전 1 2 다음
