(인터랙티브 웹 페이지 만들기) Chapter2

Posted Sep 24, 2023

800, "height"=>500}" class="preview-img" alt="Preview Image" w="1200" h="630" >

By Jogyejin 13 min read

css란

CSS는 Cascading Style Sheets 약자이며 HTML, XHTML, XML 같은 문서의 스타일를 꾸밀 때 사용하는 스타일 시트 언어이다 HTML로 문서의 뼈대를 만들면 CSS는 이 문서의 색칠을 담당하고 있다
글꼴이나, 배경색, 너비와 높이, 위치 등을 지정하거나, 웹 브라우저, 스크린 크기, 장치에 따라서 화면을 다르게 표시될 수 있도록 지정할 수도 있다.

CSS는 1996는 12월 W3C(웹 문서 표준을 만드는 기관)가 도입 했는데 그 전엔 HTML언어 하나로 문서의 뼈대도 만들고, 꾸밈도 같이 했다. 그러다 보니 HTML 문서를 수정할 때 모든 문서를 하나씩 수정해야 하는 번거로움이 있었으며, CSS는 문서의 내용(content)과 표현(presentation)을 분리하여 CSS 파일 하나만 수정하면 스타일에 해당하는 HTML 문서가 한번에 수정되는 엄청난 장점이 있다

css 사용방법

기본적으로 CSS 파일을 HTML 파일에 연결하기 위해서 HTML 파일의 head 요소 안에 link 요소를 추가한다

        
      
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>

link 요소는 다양한 용도로 사용되며 외부 CSS 스타일시트를 연결하기 위해서는 알맞은 속성을 사용하는 것이 중요하다

rel 속성 : link의 두 가지 필수 속성 중 첫 번째인 rel 속성이다 이 속성을 사용하여 브라우저에 현재 문서와 링크된 문서 사이의 연관 관계를 알려줄 수 있다 rel=”stylesheet”를 사용해 브라우저에 어떤 스타일시트를 사용할 것인지 알려준다
href 속성 : 두 번째 필수 속성인 href는 가져올 파일을 지정하는 역할을 하는 속성이다 보통의 경우에 CSS 파일과 HTML 파일은 같은 폴더 안에 있습니다. 이럴 때 href=”style.css”를 사용할 수 있다 만약 CSS 파일과 HTML 파일이 다른 폴더에 있다면 HTML 파일에서 CSS 파일로 가는 올바른 경로를 적어야 한다
- [파일 경로 설정 방법]
  - 절대 경로 : 어떠한 웹페이지나 파일이 가지고 있는 고유한 경로, 절대적으로 변하지 않는 경로
  - 상대 경로 :
    1. ’/’ > 가장 최상의 디렉토리로 이동한다.(web root)
    2. ’./’ 파일이 현재 디렉토리를 의미한다.
    3. ’../’상위 디렉토리로 이동한다.
      - 만약 두 단계 상위 디렉토리로 이동하려면 ‘../../’이렇게 사용하면 된다.

css 인코딩

인코딩은 content처럼 일부 CSS 속성(property)에서 비 ASCII 문자를 사용할 때 깨지지 않도록 미리 언어셋을 구현하는 것

인코딩 정의 방법 : css파일내 최상단에 작성 @charset “utf-8”

css 선택자

선택자는 css내에서 어느 요소에 스타일을 적용할지 알려주는 방식이 css 선택자이다

Best 선택자종류	설명
`전체 선택자`	- 전체 선택자는 *을 사용하여 나타낸다 - html의 모든 태그에 대하여 적용한다
`태그 선택자`	- 태그의 이름을 사용하여 나타낸다 - 태그명이 선택자와 같은 태그들에 대해서만 적용한다
`자식/자손 선택자`	- 자손은 자식을 포괄하는 의미 - 자손은 모든 하위 요소를 의미하며 자식은 바로 아래의 자식 요소에만 적용 - ‘부모 자손 {속성: 속성값;}’ 으로 적용한다 - 직계 자식에만 적용시에는 ‘부모 > 자손 {속성: 속성값;}’으로 적용한다
`클래스 선택자`	- 클래스 선택자는 여러 곳에서 적용 가능하다 - 클래스 선택자는 동일한 이름 사용이 가능하다 - 클래스 선택자는 .클래스이름을 사용하여 나타낸다 - 클래스 이름이 같은 태그들에 대하여 적용된다
`ID 선택자`	- ID 선택자는 한 곳에서만 적용 가능하다 - ID 선택자는 동일한 이름 사용이 불가능하다 - ID 선택자는 #아이디이름을 사용하여 나타낸다 - ID 이름이 같은 태그에 대해서 적용된다

- 전체 선택자 예제

        
      
/* 전체 선택자 */
* {
    margin: 5px;
    padding: 10px;
} 

See the Pen 전체 선택자 예제 by mon node (@mon-node) on CodePen.

- 태그 선택자 예제

        
      
h2, p {color: red; font-size: 40px;}

See the Pen 태그 선택자 by mon node (@mon-node) on CodePen.

- 자식/자손 선택자 예제

        
      
/* -- 직계 자식중에 li선택 --*/
ul > li {
    color: red;
}

/* -- 모든 자손중에 li 선택 --*/
ul li {
    color: red;
}

See the Pen Untitled by mon node (@mon-node) on CodePen.

- 클래스 선택자 예제

        
      
.testclass{
  background: yellow;
}

See the Pen 클래스 선택자 예제 by mon node (@mon-node) on CodePen.

- id 선택자 예제

        
      
#korea{
    color:red;
    width:100%;
    height: 140px;
}

See the Pen id 선택자 예제 by mon node (@mon-node) on CodePen.

폰트 스타일링

웹 사이트에서 폰트를 변경하여 조금 더 UI적으로 개선해보자

폰트 굵기 변경

font-weight 속성을 사용해서 폰트의 굵기를 변경할 수 있다

[제공되는 속성값]

normal : 폰트를 보통 굵기로 적용
bold : 폰트를 굵게 적용

폰트 크기 변경

font-size 속성을 사용해서 폰트의 사이즈를 변경할 수 있다

[제공되는 속성값]

px : 픽셀 단위로 폰트 크기를 적용한다
rem : 최상위 부모인 <html> 태그를 기준으로 폰트 크기를 적용한다
em : 부모 요소를 기준으로 폰트 크기를 적용한다

폰트 모양 변경

font-family 속성을 사용해서 폰트의 모양을 변경할 수 있다

[적용 방법] font-family: “적용할 폰트체명”;

구글 폰트 예제

구글 폰트 다운로드 사이트에서 폰트 선택
해당 폰트의 Select this styles 클릭
Use on the web에서 @import 선택 후 head 코드와 families 코드를 복사
아래 예제와 같이 css파일에 적용

        
      
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap');

.leftdiv {
  font-size: 40px;
  font-family: 'Rubik Moonrocks', cursive;
}

See the Pen 구글 폰트 예제 by mon node (@mon-node) on CodePen.

폰트 색상 변경

color 속성을 사용해서 폰트의 색상을 변경할 수 있다

[제공되는 속성값]

색깔 영문명 : 폰트 색상을 영어 색상명으로 표기
#000000 : 폰트 색상을 16진수로 표기
rgb(0,0,0) 폰트 색상을 RGB로 표기

웹 페이지 너비와 높이 지정하기

width, height 속성을 사용해서 태그들의 영역과 여백 크기를 지정할 수 있다

[제공되는 속성값]

px : 너빗값과 높잇값을 px단위로 설정한다
% : 부모 태그를 기준으로 너빗값과 높잇값을 % 단위로 설정한다
vw : 웹 브라우저의 너비를 기준으로 너빗값과 높잇값을 백분율로 설정한다
vh : 웹 브라우저의 높이를 기준으로 너빗값과 높잇값을 백분율로 설정한다

바깥쪽 여백 지정하기

margin 속성을 사용해서 태그의 바깥쪽 여백 설정이 가능하다

[제공되는 속성값]

px : 너빗값과 높잇값을 px단위로 설정한다
% : 부모 태그를 기준으로 너빗값과 높잇값을 % 단위로 설정한다
vw : 웹 브라우저의 너비를 기준으로 너빗값과 높잇값을 백분율로 설정한다
vh : 웹 브라우저의 높이를 기준으로 너빗값과 높잇값을 백분율로 설정한다

안쪽 여백 지정하기

padding 속성을 사용해서 태그의 안쪽 여백 설정이 가능하다

[제공되는 속성값]

px : 너빗값과 높잇값을 px단위로 설정한다
% : 부모 태그를 기준으로 너빗값과 높잇값을 % 단위로 설정한다
vw : 웹 브라우저의 너비를 기준으로 너빗값과 높잇값을 백분율로 설정한다
vh : 웹 브라우저의 높이를 기준으로 너빗값과 높잇값을 백분율로 설정한다

블록 요소와 인라인 요소

태그의 크기와 테두리 등을 지정할 때 블록 요소와 인라인 요소의 태그에 따라 다르게 적용된다

“블럭요소” : 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들을 말한다

“인라인요소” : 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소를 말한다

블럭요소(block element)와 인라인요소(inline element)의 종류

- 블럭요소 : <div>,<table>,<h1>~<h6>,<p>,<form>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<pre>,<blockquote>등

- 인라인요소 : <span>,<a>,<br>,<em>,<strong>,<input>,<label>,<img>

Develop, Javascript

Javascript

This post is licensed under CC BY 4.0 by the author.

css란

css 사용방법

css 인코딩

css 선택자

- 전체 선택자 예제

- 태그 선택자 예제

- 자식/자손 선택자 예제

- 클래스 선택자 예제

- id 선택자 예제

폰트 스타일링

폰트 굵기 변경

폰트 크기 변경

폰트 모양 변경

폰트 색상 변경

웹 페이지 너비와 높이 지정하기

바깥쪽 여백 지정하기

안쪽 여백 지정하기

블록 요소와 인라인 요소

Trending Tags