[HTML/CSS] 기본 개념 정리 MARK lll

OFFDUTYBYBLO·2020년 6월 15일

HTML/CSS

목록 보기

3/6

1. CSS 정의

Cascading Style Sheets
CSS란 HTML 태그들에 디자인을 입혀주는 것이다.
html이 헤더, 문단, 테이블 등으로 정보를 조직화하는 구조를 제공한다면, CSS는 HTML이 아름다워 보이도록 스타일을 입히는 것이다.

2. CSS 적용

2.1 인라인 스타일

태그 style 속성에서 직접 작성할 수 있다.

<h1 style="color: red;">Front</h1>

빠르고 편하지만 h1태그에 글씨 색상을 제외하고 10개가 넘어가는 스타일을 적용한다면 코드 가독성이 떨어지고, 유지보수에도 좋지 않은 방법이다.

2.2 Style 태그

html 파일 내에 CSS를 적용하기 위해서 style태그를 사용한다.

<style>
     h2 {
         color: blue;
     }
</style>

이 방법도 html 코드도 작성하고, 빠르고 편리하지만 기능적으로 분리되지 않았기 때문에 유지보수에 적합하지 않다.
HTML을 수정하려면 html파일을 확인하고, 디자인을 수정하려면 css파일을 확인하는 것이 좋은 코드이다.

2.3 CSS 파일에 작성

1,2 번은 html 파일에 직접 디자인을 했다면, 3번의 방법은 html 파일과 분리하여 css파일에 따로 작성하는 방법이다.
이 방법을 사용하기 위해서는 html파일에서 어느 css파일이 쓰였는지 브라우저에 알려야 하므로, 링크를 해주는 태그를 추가해야 한다.

<link href="index.html" rel="stylesheet" type="text/css" />

link태그는 사용할 css파일을 링크해준다.
href속성에 속성값으로 css파일 경로를 작성한다.
type은 link태그로 연결되는 파일이 어떤 것인지 알려준다. 여기서 css file을 연결하므로 type값은 항상 "text/css"이다.
rel은 HTML file과 CSS file과의 관계를 설명하는 속성이다. css파일을 링크할 때는 항상 "stylesheet"값을 대입해준다.

3.CSS 작성법

디자인을 적용할 선택자(selector)를 지정하고, 어떤 디자인을 적용할지 작성한다.
위의 예제는 p라는 태그의 내용(텍스트)을 빨간색으!로 바꾼다는 뜻이다.
콜론(:)을 기준으로 왼쪽의 color는 property(속성)이라고 하며, 오른쪽의 red는 속성 값이다.
선택자(selector)는 여러 종류가 올 수 있다.

3.1 tag:태그이름

p {
   font-size: 12px;
}

이러한 css가 적용되면, 모든 p태그의 글씨 크기가 12픽셀로 적용된다.

3.2 class: .클래스이름

.profile-detail {
	font-weight: bold;
}

위 클래스가 적용된 태그는 모두 글씨 두께가 두꺼워진다.

3.3 id: #아이디 이름

#profile {
  border-width: 1px;
  border-color: black;
}

위 아이디에 해당하는 태그는 모두 테두리 선이 1px, 색이 검정색으로 적용된다.

4. font family

폰트 스타일을 지정하는 속성

#title {
  font-familya: Georgia, "Times New Roman". Times, serif;
}

Georgia 부분은 브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용하겠다는 뜻이다. 만약 지원하지 않으면, "Times New Roman"을, 이것도 없으면 Times, 그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻이다.
"Times New Roman" 부분에면 쌍따옴표로 감싸져 있는데, 폰트 이름에 띄어쓰기가 되어있으면 쌍따옴표로 감싸줘야한다.
font-family 값에는 보통 여러가지 폰트를 나열한다. 사용자가 어떤 브라우저를 사용할지 모르기 때문에 최대한 여러 폰트를 나열하는 것, 가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트이다.

5. font size

.big-size-font {
  font-size: 50px;
}

big-size-font라는 클래스에 50px의 폰트크기를 지정
폰트 크기 단위는 px,em,pt등 여러가지가 있다.
브라우저는 가장 먼저 태그를 확인하고 그에 맞게 디폴트 스타일을 적용한다. 하지만 해당 태그나 class, id에 css값이 있다면 해당 스타일을 더 우선순위로 적용한다.

6. font-weight

글씨 두께를 조절하는 property이다.
font-weight는 normal, bold, 100,200,..,900 등의 값이 지정될 수 있다.
숫자 400과 normal, 700과 bold는 같은 두께이다.
보통 두껍거나 아니거나 두가지 경우면 되므로 간편하게 bold값을 지정하자.

7. font style

a {
  font-style: italic;
}

font-style이라는 property로 쉽게 글씨 스타일을 바꿀 수 있다.

8. color

.pink {
  color: pink;
}
.yellow {
  color:yellow;
}

color라는 프로퍼티는 글씨 색깔을 변경해준다.
좀 더 세밀한 색 조정을 하기 위해서 3가지 방법이 있다.

h1 {
  color: #eb4639;
}
h1 {
  color: rgb(235, 70, 57);
}
h1 {
  color: hsl(4,82%, 57%);
}

hex 색상코드, rgb값, hsl 등 여러가지로 표현이 가능하다.
필요한 색상이 있을 때는 구글링을 통해서 해결 , color picker

여기서!! 궁금한 점!!! property와 attributes의 차이점은?!

attribute
```
<a href="www.naver.com">네이버 이동!</a>
```
a 태그라면 모두 가질 수 있는 href라는 attribute가 있다. 그것에 url값을 부여하여 네이버 이동!이라는 텍스트를 브라우저에서 클릭하게되면 이곳에 접속할 수 있게 된다. href에 부여된 값은 언제든 변할 수 있는 것이고, a 태그가 가진 고유한 값은 아니다. 또한 attribute는 메모리에 올라가 있지 않은 상태로 그것만으로는 아무런 의미가 생기지 않게 된다. attribute는 웹브라우저에의해 HTML 코드가 실행되어 DOM(Document Object Model)에 저장되었을때만, 저 a태그가 가진 property로써 그 타입과 이름이 저장될 수 있어 생성된 그 페이지 내에서만 비로소 property를 통해 의미가 생긴다.
property

property는 찰흙이 기본적으로가지고있는 끈적거리는 성질이나, 금속이라면 기본적으로 가지고있는 전기를 흘려보내는 성질과 같은 개념입니다.
attribute와는 다르게 누군가 그것을 어떤 태그에 붙여놓은 뒤 브라우저에서 실행하여 DOM 안에 저장해 놓아야만 의미가 생기는 개념이 아닌 그 자체가 가진 고유한 성질과 같은 개념이라고 합니다.
attribute를 통해 선언하지 않더라도 HTML의 요소들이 기본적으로 가지고있는 property들이 존재합니다. 하지만 그것의 역할을 특정하기 위해서는 그 이상의 attribute의 선언이 필요하겠죠.