이동규

개발 잘하고 싶다

[CSS]

  • HTML 의 요소 스타일을 정하여, 시각적으로 보이는 형태로 만들 수 있다.
  • CSS 는 HTML 로 만들기 때문에, 반드시 HTML 이 필요하다.

[방대한 CSS에 당황하지 않기]

CSS 의 방대한 속성을 외울 필요는 없으며, CSS 의 속성은 온라인에서 찾아보면 된다.

늘 그렇듯이, CSS 스타일 작업은 구글링을 활용하도록 하자.

  • 링크: https://developer.mozilla.org/ko/docs/Web/CSS

1. 스타일을 올바르게 담기

(1) HTML 인라인요소 사용:

필요한 섹션마다 일일히 인라인요소에 속성 코드를 작성해야하기 때문에, 효율적이지 못한 방법이다.

<body>
    <!-- HTML 스타일 요소 사용 -->
    <h1 style="color:mediumspringgreen">Hello world!</h1>
    <button style="background-color:blueviolet">I am button!</button>
    <button style="background-color:darkorange">Another button!</button>
    <hr>
...

(2) 스타일 요소 사용:

문서 사이에 스타일 공유가 불가능하므로 추천되지 않는 방법이다.

<head>
	...
    <!-- STYLE은 head에서 정의 -->
    <style>
        h2 {
            color: chocolate;
        }
    </style>
</head>

<body>
...
    <!-- STYLE 요소 사용 -->
    <h2>Hello world</h2>
    <h2>Hello world</h2>
    <h2>Hello world</h2>
    <hr>
...

(3) 외부 스타일시트 사용:

CSS 파일에 스타일을 정의하고, 링크 요소를 통해 HTML 문서와 연결할 수 있다.

  • link 요소는 head 에만 사용할 수 있다.
  • link 의 rel 속성: 스타일시트의 이름이며, 기능에 영향을 주지 않으므로 맘에 드는 이름으로 작성하면 된다.
  • link 의 href 속성: URL 링크나 파일의 경로를 작성하면 된다.
<head>
...
    <!-- link는 head에서 정의 -->
    <link rel="stylesheet" href="1.style.css">
</head>

<body>
...
    <!-- 외부 스타일시트(css) 사용 -->
    <h3>Hello world!</h3>
    <h3>Hello world!</h3>
    <h3>Hello world!</h3>
...
</body>

h3 {
    color: hotpink;
}

2. 색 및 배경색 속성: color, background-color, background

html 의 요소에 색 및 배경색을 CSS 파일에서 지정할 때는 html 의 요소를 작성하여 연결한다.

  • color 속성: 글자 폰트
  • background-color 속성: 배경색
  • background 속성: 배경색, 배경이미지, 그래디언트 등
h1 {
    color: hotpink;
    background-color: blue;
}

button {
    color: aquamarine;
    background-color: black;
}

p {
    color: yellow;
    background: gray;
}

3. 색상 시스템: RGB와 16진수

  • 색의 코드값이 필요할 때, 유용한 링크: https://www.google.co.kr/search?q=color+picker
/* rgb로 색상, 배경색 변경 */
h1 {
    color: rgb(255, 158, 250);
    background-color: rgb(66, 135, 245);
}

/* 16진수로 배경색 변경 */
body {
    background-color: #3860ff;
}

4. 일반 텍스트 속성: text-align, font-weight, text-decoration, line-height, letter-spacing

  • text-align 속성: 텍스트 정렬 설정
    • 링크: https://developer.mozilla.org/ko/docs/Web/CSS/text-align
  • font-weight 속성: 폰트 굵기 설정
    • 링크: https://developer.mozilla.org/ko/docs/Web/CSS/font-weight
  • text-decoration 속성: 텍스트를 꾸미는 선을 조정할 수 있다. 밑줄, 윗줄, 취소선, 실선, 선의 색 등을 설정
    • 링크: https://developer.mozilla.org/ko/docs/Web/CSS/text-decoration
  • line-height 속성: 줄간격 설정
    • 링크: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
  • letter-spacing 속성: 글자 간격 설정
    • 링크: https://developer.mozilla.org/ko/docs/Web/CSS/letter-spacing
/* h1 요소의 텍스트정렬, 폰트굵기, 줄, 글자간격 설정 */
h1 {
    text-align: center;
    font-weight: 600;
    text-decoration: crimson underline wavy;
    letter-spacing: 6px;
}

/* 링크 요소의 줄, 폰트굵기 설정*/
a {
    text-decoration: none;
    font-weight: bold;
}

/* 단락 요소의 줄간격 설정 */
p {
    line-height: 2.5;
}

image-20220820175140314

5. 픽셀 글꼴 크기 지정하기: font-size

픽셀로 글꼴 크기를 정하는게 간단하지만, 반응형 웹을 개발할 때에는 추천되지 않는다.

1 픽셀은 사용자의 디스플레이 크기에 따라 다르기 때문에 반응협 웹에는 적합하지 않다.

h1 {
...
    /* 픽셀 단위로 글꼴크기 지정 */
    font-size: 90px;
}

6. 픽셀 글꼴 크기 지정하기: font-family

  • CSS 폰트의 스택 확인링크: https://www.cssfontstack.com/

쉼표로 원하는 폰트와 백업 폰트의 우선순위를 정할 수 있다.

h1 {
...
    /* 쉼표로 원하는 폰트와 백업폰트의 우선순위를 정할 수 있음 */
    font-family: Arial, Helvetica, sans-serif;
}

댓글남기기

참고