한바다
[HTML]CSS의 기본 본문
✔웹 문서에 디자인 입히기
CSS Cascading Style Sheet의 약어로 ' Cascading'은 폭포처럼 떨어져 내리는 의미를 가지고 있다.
css에서는 디자인 속성이 html문서의 구조 즉 DOM(Document Object Model) Tree 구조에서 상위요소에서
정의한 디자인 속성이 하위 요소로 전달되는(상속 개념)의미에서 유래 되었다고 할 수 있다.
HTML이 텍스트나 이미지, 표 같은 요소를 웹 문서에 넣어 뼈대를 만드는 역할을 한다면
CSS는 텍스트나 이미지, 배경의 크기나 배치방법 등의 요소를 이용하여 디자인을 담당하여 웹문서에
생기를 불어 넣는다.(css는 뼈에 살을 붙이는 거구나... )
[CSS 적용 전]
[CSS 적용 후]
✔CSS 선택자(CSS selector)
CSS 로 꾸미기 설정을 진행할 때는 5가지 방법이 존재
1. 태그 옆에 style="원하는 스타일 작성"
2. head 태그 안에 style 태그를 작성해서 스타일 적용
① 태그 이름을 작성한 후 스타일 적용
② 태그 옆에 class="변수명" 설정한 다음 style 태그 안에 변수명을 작성해준 후 스타일 적용.
단, class="변수명"으로 표기할 경우 style 태그 안에 .변수명{} 으로 필히 . 표기
③ 태그 옆에 id="변수명" 설정한 다음 style 태그 안에 변수명을 작성 해준 후 스타일 적용.
단, id="변수명"으로 표기할 경우 style 태그 안에 #변수명{}으로 필히 # 표기
[ ②(class)와 ③(id) 차이점 ]
style 에 관련된 코드를 작성할 때는 class 안에 변수명을 작성해주는 것이 좋음
javascript 에 관련된 코드를 작성할 때는 id안에 변수명을 작성해주는 것이 좋음
▶ class의 경우 여러 태그에 같은 스타일을 적용할 때 유용 id보다 우선순위가 낮음
id의 경우 특정한 기능을 가진 태그에 유일한 스타일을 적용할 때 유용, 우선순위는 1번
④. 태그에 작성된 특정 속성을 사용해 선택하는 선택자
input[name] : input 태그 안에 존재하는 모든 name 속성 값이 공통 설정
위와 같이 작성할 경우 맨 마지막에 작성된 디자인이 적용
만약에 같은 속성(=name) 에서 name="변수명" 특별한 디자인을 작성하길 원한다면
input[name="변수명"]{} 작성해준 후 디자인 적용
3. .css형식 파일을 사용해서 .css 파일 안에 css코딩 작성
head 태그 안에 style 태그 대신 link 태그를 사용해서 작성
link 태그 : 외부 css 파일과 연결하는 태그(css 파일이외 여러가지 다수 연결 가능)
rel(relationship) : 연결하려는 파일이 어떤 종류인지?
href(hyper reference) : 참조하려는 파일의 위치(주소, 경로 등)
3번을 활용해 진행한 방법
스타일.css는 다른 파일.css로 작성하였다.
※ HTML 주석 정리 ※
ⓐ html 주석 <!--주석내용-->
ⓑ css주석: <style> 요소 안에 배치되며 /* 로 시작해서 */ 로 끝난다.
ⓒ script주석: <script> 요소 안에 배치되며 // 로 시작