□ CSS(Casacading Style Sheets)
○ 현재 사용되는 CSS는 2005년 CSS3로 정의됨
○ 목적
- 디자인을 위한 것으로 문서를 어떻게 브라우저 상에 렌더링할지 표현 방법을 정의한 언어임
- HTML은 구조화에 집중(Semangtic Web 태그 기반, 의미표현 + HTML 태그로 표현)
- CSS를 통해 화면 렌더링 표현방법을 정의
- JS(Javascript)로 사용자 인터페이스등 정의
○ Selector
- CSS Selector라고도 부름
- HTML 문서 특정 부분관련 렌더링 방법을 정의하기 위해 특정 부분을 선택해야함
- 위를 고려하여 CSS Selector를 사용하며 문법은 아래와 같음
/* HTML 태그에 CSS 적용 */
/* 방법① ex) p태그 css적용 */
p{
/*↓값*/
font-size: 15px; /* ← ;을 사용하여 선언*/
/*↑프로퍼티*/
}
/* 방법② ex) 클래스 css적용 */
/* 클래스에 css 적용시 .클래스명 으로 지정 */
.classname{
/*↓값*/
font-size: 15px; /* ← ;을 사용하여 선언*/
/*↑프로퍼티*/
}
○ CSS는 propery와 value로만 이루어져 있어 쉬워보이지만 모던 웹, 즉, 반응형을 만들기 위해서는 다양한 문법을 이해해야함
○ CSS 연동방법 3가지
- HTML 문서 태그안에 직접 style 속성 넣기
- HTML 문서 <head> 태그 안에 <style>태그로 넣기
- HTML 문서 <head> 안에 CSS 파일로 링크
※ 참고요망 : https://dandora-90.tistory.com/81
웹 기본기술1
○ 웹 페이지 = HTML + CSS + javaScript ○ HTML 언어 : 웹페이지를 만드는 언어로 즉, 컴퓨터 언어로 작성된 문서를 코드라고 부름 ex) 표기내용 hi!HTML ○ 사용자는 HTML 파일요청을 서버에하고, 서버에서
dandora-90.tistory.com
○ Reset CSS
- 웹브라우저 마다 다른 스타일이 지정되어 있으므로, 작업전 이를 초기화하여 다양한 웹브라우저에서 동일한 스타일로 표시되도록 설정
- 보통 normalize.css 를많이 사용하며 cdn을 통해 링크 시켜 사용 가능 : https://cdnjs.com/libraries/normalize
'HTML&CSS > CSS' 카테고리의 다른 글
| div 태그의 name 속성을 활용한 호버시 생성되는 툴팁 커스터마이징 (1) | 2024.01.04 |
|---|---|
| CSS 사이즈(viewport 단위 등) (0) | 2023.11.14 |
