쌍용 강북 교육센터 국비학원 Day 41일차
기초적인 Java와 Oracle 다음에 이것을 병합하는 JDBC를 거쳐 이제 41일차 기준 HTML, CSS, JSP로 넘어간다.
HTML의 주석문 처리
단축키 - Ctrl + Shift + /
head의 주석문 - /* 내용 */
body의 주석문 - < !-- 내용 -- >
CSS의 우선순위
1. ! important (css 강제적용)
2. 해당 태그에 직접준 것
3. HTML 파일에서 준 style 태그 (임베디드방식)
4. 외부에 있는 css파일을 로드하는 것 (예 <link rel="stylesheet" href="mycss.css"> )
Display
Block 방식
세로형태로 보여지는 방식으로 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.<h> 태그와 <div>, <form> 태그의 기본값은 block 방식이다. 또한 블럭요소 (Block Element)는 width 와 height가 적용된다.
Inline 방식
가로형태로 보여지는 방식으로 새로운 라인(line)에서 시작하지 않고, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용만큼만 차지한다. 대표적으로 <a> (앵커태그), <lable>, <span> 태그가 속하고 인라인 요소 (Inline Element)는 width 와 height가 적용되지 않는다.
인라인과 블록 이외에도 display 속성에 자주 사용되는 속성값에는 인라인-블록(inline-block)이 있다. display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작한다. 이처럼 인라인-블록 요소는 인라인 요소와 비슷하지만 너비와 높이, margin을 설정할 수 있다.
CSS 선택자 (Selector)
선택자란 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들은 선택하여 스타일을 적용할 수 있게 된다.
Rule Set
HTML페이지 안의 특정 요소들을 어떻게 렌더링(Rendering) 할 것 인지 브라우저에게 알려주는 CSS문장이다. 스타일 규칙이라고도 불리는 이 문장은 스타일에 관한 규칙을들 집합처럼 나타낸다. 선택자는 Rule Set의 영향을 받는 HTML페이지 않의 특정 element들을 선택해서 선언 블럭의 내용을 적용 시켜준다.
선택자 우선순위
아이디 (#) > 클래스 (.) > 태그
1. 전체 선택자 (Universal Selector)
전체 선택자는 HTML페이지 내부의 모든 요소(태그)에 같은 CSS 속성을 적용한다. 그렇게 때문에 보통 margin이나 padding값을 초기화하는 등 기본값을 정해둘때 사용한다. 하지만 이를 사용하면 문서안의 모든 요소를 읽어내려야 하기 때문에 페이지 로딩의 속도가 느려질 수 있다.
2. 태그 선택자 (Type Selector)
태그 선택자는 HTML요소를 직접 지칭하는 가장 간단한 선택자이다.
3. 클래스 선택자 (Class Selector)
클래스 선택자는 주어진 값을 class속성값으로 가진 HTML 요소를 찾아 선택한다. 이 때 선택하려는 속성값 앞에 마침표를 추가해 작성한다. 주의할 점은 클래스는 HTML태그 구조를 대신할 수 없기에 클래스 요소 대신 사용할 수 있는 HTML 태그가 있는지 확인해야 한다.
4. ID 선택자 (ID Selector)
ID 선택자는 마침표 대신 #을 사용하고, 클래스 속성이 아닌 id속성을 사용하는 것을 제외하곤 클래스 선택자와 매우 유사하다. 한 페이지 내에서 여러번 반복될 필요가 있는 스타일은 클래스를 사용하고, 한번만 유일하게 적용될 스타일은 ID를 사용하는 것이 좋다.
클래스 선택자는 글자색이나 글자 굵기 등 나중에 다른 곳에도 적용할 수 있는 스타일을 지정하고, id 선택자는 웹 문서 안에서 요소의 배치 방법을 지정할 때 자주 사용한다.
※ 선택자를 불러올 때 주의할 점
h1 : first-child {
- first child 중에서 h1인 것을 의미
}
h1: first-of-type{
- child 중에서 처음 나오는 h1을 의미
}
특수기호 표기법
코드 내부에서가 아닌 외부에서(웹 페이지 내부) 특수기호를 표기하고 싶을 때의 대표적인 코드표이다.
- 부등호(<) - <
- 부등호(>) - >
- 공백(" ") - - 공백(스페이스) 1개를 의미한다.
- 앰퍼샌드(&)기호 - &
- 쌍따옴표(") - "
- 홑따옴표(') - '
- 샵(#) - #
