All about WEB/All about CSS

 (6)
6. CSS 색(Colors) ① HTML에서는 CSS의 속성을 이용해 색을 적용할 수 있다. ② RGB, HEX, HSL, RGBA, RGBA 의 수치나 색의 이름을 이용해 색을 표현할 수 있다. ㉠ HTML에서는 140가지의 색 이름이 지원한다. ③ background-color 속성을 이용해 HTML 요소 텍스트의 배경색을 설정할 수 있다. 분홍색 ④ color 속성을 이용해 HTML 요소 텍스트의 글자색을 설정할 수 있다. 파란색 ⑤ border를 이용해 테두리 색을 적용할 수 있다. 보라색 ⑥ RGB 색의 값은 빨간색(RED), 초록색(GREEN), 파랑색(BLUE) 광원을 나타낸다. ㉠ rgb(red, green, blue)를 이용해 RGB 색 값을 나타낼 수 있다. ㉡ 각각 0~255까지의 값이 있으며, 256 x 256..
5. CSS 주석(Comments ① 주석(Comments)는 코드를 설명하기 위해 사용한다. ㉠ 주석을 사용하면 코드의 가독성을 높여줘 코드 수정을 원할하게 해준다. ② 브라우저는 주석을 무시한다. ㉠ CSS 주석은 스타일시트에 위치하며, /* */를 이용해 주석처리를 한다. ㉡ 요소 내부에서는 어디 있든 상관없다. 어림없는 소리 ③ 정상적인 위치에서 벗어난 곳에 주석이 작성되면 브라우저에 재량에 따라 버그가 발생할 수 있다. ㉠ 요소 바깥에 위치할 경우는 다음과 같은 결과를 보인다. ㉡ style 요소 도중에 있어서 요소 자체가 훼손된 경우는 다음과 같은 결과를 보인다. ⓐ-1 요소 자체가 훼손된 경우 해당 요소를 제외하기 때문에 없는 것과 동일한 결과가 나온다. ⓐ-2 해당 요소의 문제되는 태그를 제거할 경우 동일한 결과가 나타난다..
4. CSS 적용 ① 스타일 시트를 적용하는 방법은 세 가지가 있다. ㉠ 한 개의 요소에 고유한 스타일이 있을 경우 인라인 스타일시트(Inline CSS)를 사용할 수 있다. ⓐ 인라인 스타일시트를 사용하기 위해 관련 요소에 스타일 속성을 추가하면 된다. 짧고 굵은 ㉡ 한 개의 HTML 페이지에 고유한 스타일이 있을 경우 내부 스타일시트(Internal CSS)를 사용할 수 있다. ⓐ 내부 스타일시트를 사용하기 위해 해드 가운데 ㉢ 외부 스타일시트(External CSS)는 웹사이트의 스타일을 하나의 파일에 저장해서 사용하는 방법이다. ⓐ 각 HTML 페이지의 가운데가 아니라 왼쪽 p { border: 2px solid powderblue; padding: 30px; } ② 하나 이상의 스타일이 적용 되었을 때의 우선순위..
3. CSS 선택자(Selectors) ① CSS 선택자는 스타일을 적용시키고 싶은 HTML 요소를 선택하게 해준다. ㉠ 선택자는 5개로 분류된다. ⓐ 단순 선택자(Simple selectors)는 이름, id, 클래스로 요소를 선택하는 방법이다. ⓑ 결합자 선택자(Combinator selectors) 요소들의 관계를 이용해 요소를 선택하는 방법이다. ⓒ 의사 클래스 선택자(Psedo-class selectors)는 특정 상태를 이용해 요소를 선택하는 방법이다. ⓓ 의사 요소 선택자(Psedo-elements selectors)는 요소의 일부를 선택하고 스타일을 부여하는 방법이다. ⓔ 속성 선택자(Attribute selectors)는 속성이나 속성 값을 이용해 요소를 선택하는 방법이다. ② 단순 선택자에는 다음과 같은 선택자가 포함되어 있..
2. CSS attribute와 property ① HTML의 attribute와 CSS의 property는 모두 속성이라는 동일한 의미를 갖고 있다. 따라서 이것만으로는 둘을 구분하기 어려움이 있다. ② HTML의 attribute는 요소의 추가적인 정보에 해당한다. ㉠ attribute는 요소에 속하거나 그 안에 내재된 것으로 간주되는 특성이다. ③ CSS의 property는 요소의 특성을 설명하는 것이다. ㉠ property는 요소에 속하는 특성이다. ㉡ property의 한글 뜻은 '재산', '소유권'을 의미하며, 필수적이거나 특별하다는 의미가 좀 더 강하다. ㉢ 그러나 property는 위와 무관하게 일반적인 특성을 의미하기 위해 사용된다. 요즘에는 대부분의 경우 property와 attribute는 서로 바꿔서 사용할 수 있다. ④ 요소의 ..
1. CSS 기초 ① CSS는 Cascading Style Sheets(종속형 시트)의 약자이다. ㉠ 마크업 언어가 실제 표시되는 방법을 기술하는 언어로 HTML과 XHTML에 주로 사용된다. ㉡ 마크업 언어가 웹사이트의 레이아웃을 담당한다면 CSS는 디테일을 장식하는 역할을 수행한다. ② CSS 는 선택자(selector), property, 값으로 구성된다. ㉠ 선택자는 스타일을 적용시키기 원하는 HTML 요소를 지칭하기 위해 사용한다. ㉡ 선언 블럭은 중괄호로 감싸져 있으며, 하나 이상의 선언이 포함된다. ㉢ 각각의 선언들은 세미 콜론(;)으로 구분한다. ㉣ 선언은 CSS 속성명과 값의 쌍으로 이루어져 있으며 둘은 콜론(:)으로 구분한다. p{color:black;text-align:right;} ③ 선언 블럭 내의..

티스토리툴바