[인터랙티브 웹 페이지 만들기] 3장 | CSS 기본 문법 빠르게 끝내기

권순천·2023년 9월 16일

CSS JavaScript html 자바스크립트

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

목록 보기

3/8

03-1 HTML에 CSS연결하기

HTML 파일에 외부CSS 파일 입력하기

에디터에서 외부 CSS 파일 입력하기

link:css 입력 후 Enter를 누르면 외부 style.css 파일을 연결하는 자동 완성 구문 입력

CSS파일의 경로 수정하기

<link>태그의 href 속성값을 css/style.css로 입력

CSS파일의 문자 인코딩 방식 지정하기

style.css파일에 @charset "utf-8" 입력

03-2 CSS로 HTML 요소 다양하게 선택하기

전체 선택자 - 모든 HTML 요소를 한꺼번에 선택하기

* {
 border: 1px solid red;
}
/*모든 html요소의 테두리를 1px 굵기의 빨간색 실선으로 적용*/

태그 선택자 - 태그명을 이용하여 선택하기

<body>
  <h1>제목1</h1>
  <h2>제목2</h2>
  <h3>제목3</h3>
</body>

h1 {
	border: 1px solid red; /*제목1 빨강 테두리*/
}
h2 {
	border: 1px solid green; /*제목2 초록 테두리*/
}
h3 {
	border: 1px solid blue; /*제목3 파랑 테두리*/
}

자손 선택자 - 자식과 하위 요소를 모두 선택하기

<body>
  <strong>그냥 텍스트 요소</strong>
  <p>
  	<strong>자손 텍스트 요소</strong>
  </p>
</body>

p strong {
	border: 1px solid blue; /*자손 텍스트 요소만 파랑 테두리*/
}

자식 선택자 - 직계 자식 요소만 선택하기

<body>
  <ul>
    <li>
      자식 요소
      <ol>
        <li>자손 요소</li>
      </ol>
    </li>
  </ul>
</body>

ul li {
	border: 1px solid blue; /*자식, 자손 요소 파랑 테두리*/
}

ul > li {
	border: 1px solid blue; /*자식 요소만 파랑 테두리*/
}

그룹 선택자 - 여러 개의 요소를 그룹으로 선택하기

<body>
  <h1>제목1</h1>
  <h2>제목2</h2>
  <h3>제목3</h3>
</body>

h1, h2, h3 {
	border: 1px solid blue; /*제목1 빨강 테두리*/
}

순서 선택자 - 형제 요소의 순서를 이용하여 선택하기

<body>
  <ul>
  	<li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
  </ul>
</body>

ul li:nth-of-type(1) {
	border: 1px solid red;
}
ul li:nth-of-type(2) {
	border: 1px solid green;
}
ul li:nth-of-type(3) {
	border: 1px solid blue;
}
ul li:nth-of-type(4) {
	border: 1px solid violet;
}

수열 선택자 - 수식을 이용하여 선택하기

<body>
  <ul>
  	<li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
    <li>item10</li>
  </ul>
</body>

ul li:nth-of-type(2n) {
	border: 1px solid blue;
} /*2의 배수 요소만 파랑색 테두리*/

마지막 요소 선택자 - 형제 요소 중 마지막 요소를 선택하기

ul li:last-child {
	border: 1px solid blue;
} /*마지막 요소만 파랑색 테두리*/

홀수, 짝수 선택자 - 홀수 또는 짝수 요소를 선택하기

ul li:nth-of-type(odd) { /*홀수 선택자 파랑색 테두리*/
	border: 1px solid blue;
}
ul li:nth-of-type(even) { /*짝수 선택자 빨강 테두리*/
	border: 1px solid red;
}

수열 선택자 - 수식을 이용하여 선택하기

<body>
  <form>
    <input type="text">
    <input type="password">
  </form>  
</body>

input[type="text"] {
	border: 1px solid blue;
}
input[type="password"] {
	border: 1px solid red;
}

가상 선택자 - 가상의 요소를 선택하기

<body>
  <h1>HELLO</H1>  
</body>

h1 {
	border: 1px solid blue;
}
h1:hover {
	border: 1px solid red; /*마우스 포인터를 h1 태그 요소 위로 올리면 빨강색 테두리로 색이 바뀜*/
}

h1:before {
	content: "before content";
    color: blue;
}
h1:after {
	content: "after content";
    color: red;
}
/*:before는 요소 앞에 가상 콘텐츠를 만들고, :after는 요소 뒤에 가상 콘텐츠를 만든다*/

<h1>
  :before <!--파란글씨의 before content가 옴-->
  "HELLO"
  :after <!--빨간글씨의 after content가 옴-->
</h1>

클래스 선택자 - 클래스명으로 요소를 선택하기

<body>
  <p class="text1">클래스</p>
  <p class="text2">선택자</p>
</body>

p.text1 {
	border: 1px solid blue;
}
.text2 { /*앞에 태그 부분 생략 가능*/
	border: 1px solid red;
}

아이디 선택자 - 아이디명으로 요소를 선택하기

<body>
  <header id="header">header</header>
  <section id="section">section</section>
  <footer id="footer">footer</footer>
  <!--id는 고유의 값이므로 같은 아이디를 여러 개 지정할 수 없다.-->
</body>

header#header {
	border: 1px solid red;
}
#section { /*앞에 태그 부분 생략 가능*/
	border: 1px solid green;
}
#footer {
	border: 1px solid violet;
}

03-3 폰트 스타일링하기

폰트 굵기 바꾸기

속성명	속성값	설명
font-weight	normal	폰트를 보통 굵기로 표시
	bold	폰트를 굵게 표시

폰트 크기 바꾸기

속성명	속성값	설명
font-size	px	픽셀 단위로 폰트크기를 설정
	rem	최상위 부모인 `<html>` 태그를 기준으로 폰트 크기를 설정
	em	부모 요소를 기준으로 기준으로 폰트 크기를 설정

em는

html {
	font-size: 16px;
}
article h1 {
	font-size: 3rem; /*html 요소 기준으로 3배*/ 
}
article p {
	font-size: 1rem;
}
article a {
	font-size: 0.8rem;
}

em 단위는 실무에서 거의 안 쓰임

폰트 모양 바꾸기

속성명	속성값	설명
font-family	"폰트명"	폰트의 모양을 설정합니다.

ul li {
	font-size: 40px;
}
ul li:nth-type(1) {
	font-family: "돋움" /*한글 폰트는 큰 따옴표 감싸서 표기*/
}
ul li:nth-type(2) {
	font-family: selfi
}

구글 웹 폰트 사용하기

구글 폰트 웹 사이트 접속하기
폰트 검색해서 찾기
폰트 스타일 복사하기
- 우측 중간 [Select '폰트 이름'] 클릭
- [@import] 선택, <style>, </style> 안의 웹 폰트 코드와 그 아래의 font-family 코드 복사
HTML, CSS 파일 만들기

웹 폰트 아이콘 적용하기

폰트 어썸 웹 사이트 접속하기
회원 가입하기
폰트 어썸 웹 아이콘 코드 복사하기
- 무료 아이콘만 나오게 설정
HTML, CSS 파일 수정하기

폰트 색상 바꾸기

속성명	속성값	설명
color	영문명	폰트 색상을 영어 색상명으로 표기
	#000000	폰트 색상을 16진수로 표기
	rgb(0,0,0)	폰트 색상을 RGB로 표기

li:nth-of-type(1){
	color:red;
}
li:nth-of-type(2){
	color:#ff0000;
}
li:nth-of-type(3){
	color:rgb(255,0,0);
}

텍스트 줄 간격 바꾸기

font-size 텍스트 자체의 높잇값
line-height 줄 간격 전체 높잇값

속성명	속성값	설명
line-height	실숫값	줄 간격을 폰트 크기에 맞추어 실수 배율로 지정
	픽셀값	줄 간격을 고정된 px 단위로 지정

텍스트 정렬 방향 지정하기

속성명	속성값	설명
text-align	left	텍스트를 왼쪽 방향으로 정렬
	center	텍스트를 중앙 정렬
	right	텍스트를 오른쪽 방향으로 정렬
	justify	텍스트를 양쪽 정렬

텍스트 자간 지정하기

속성명	속성값	설명
text-spacing	1px	텍스트의 간격을 px 단위로 지정

03-4 웹 페이지에서 영역별 크기 정하기

너비와 높이 지정하기

속성명	속성값	설명
width, height	px	너빗값과 높잇값을 px 단위로 지정
	%	부모 태그를 기준으로 너빗값과 높잇값을 %단위로 지정
	vw	웹 브라우저의 너비를 기준으로 너빗값과 높잇값을 백분율로 지정
	vh	웹 브라우저의 높이를 기준으로 너빗값과 높잇값을 백분율로 지정

바깥쪽 여백 지정하기

속성명	속성값	설명
margin	px	태그의 바깥쪽 여백을 px 단위로 지정
	%	부모 태그를 기준으로 태그의 바깥쪽 여백을 %단위로 지정
	vw	웹 브라우저의 너비를 기준으로 태그의 바깥쪽 여백을 백분율로 지정
	vh	웹 브라우저의 높이를 기준으로 태그의 바깥쪽 여백을 백분율로 지정

article:nth-of-type(3){
	margin: 20px auto;
}
article:nth-of-type(4){
	margin: 20px auto 40px;
}

실무에서는 위와 같이 위쪽, 아래쪽의 바깥쪽 여백을 지정한 후 2번째 값만 auto로 설정하여 웹 요소를 항상 중앙에 배치하는 방법을 가장 많이 사용

안쪽 여백 지정하기

속성명	속성값	설명
padding	px	태그의 안쪽 여백을 px 단위로 지정
	%	부모 태그를 기준으로 태그의 안쪽 여백을 %단위로 지정
	vw	웹 브라우저의 너비를 기준으로 태그의 안쪽 여백을 백분율로 지정
	vh	웹 브라우저의 높이를 기준으로 태그의 안쪽 여백을 백분율로 지정

padding값이 지정되면 안쪽 여백 때문에 박스 크기가 커짐
기존 박스의 크기는 그대로 유지하면서 안쪽 여백만 추가하고 싶다면 padding값만큼 너빗값과 높잇값을 빼서 설정

기존 박스 크기를 유지하면서 안쪽 여백 지정하기

padding값만큼 너빗값과 높잇값을 빼지 않고 기존 박스 크기 유지하려면 box-sizing: border-box; 설정

테두리의 형태 지정하기

속성명	속성값	설명
border-width	px	테두리의 굵기
border-style	solid, dashed,dotted	테두의 모양
border-color	색상명, 16진수, rgb	테두리의 색상
border	width style color	테두리의 굵기, 모양, 색상을 한꺼번에 지정하는 축약형

실무에서는 축약형을 많이 사용

블록 요소와 인라인 요소

분류	태그	특징
블록 요소	h1~h6, p, ol, ul, dl, div, header, footer, section, article, aside, nav	1. 줄을 자동으로 바꿉니다. 2. 너비와 높이를 지정할 수 있습니다. 3. 너비를 지정하지 않으면 부모 요소 너빗값의 100%를 상속받습니다. 4. 블록 요소와 인라인 요소를 모두 묶을 수 있습니다.
인라인 요소	strong, em, a, span	1. 자동 줄 바꿈이 되지 않고 옆으로 나열됩니다. 2. 너비와 높이를 지정할 수 없습니다. 3. 인라인 태그를 사용한 텍스트의 크기가 해당 요소의 크기가 됩니다. 4. 인라인 요소만 묶을 수 있습니다.

인라인 요소는 인라인 요소만 감쌀 수 있으니, 인라인 요소를 강제로 블록 요소로 만들 때에는 주의해야 한다.

03-5 웹 페이지의 배경 꾸미기

배경색 지정하기

속성명	속성값	설명
background-color	영문명	배경색을 영어 색상명으로 지정
	rgb(0,0,0)	배경색을 RGB 표기법으로 지정
	#000000	배경색을 16진수 표기법으로 지정

배경 이미지 삽입하기

속성명	속성값	설명
background-image	url(이미지 경로)	배경 이미지 삽입
background-repeat	repeat, repeat-x, repeat-y, no-repeat	배경 이미지 반복
background-position	가로축, 세로축	배경 이미지의 위치를 지정
background-size	contain, cover	배경 이미지의 크기를 지정
background-attachment	fixed	배경 이미지가 움직이지 않게 고정

이미지의 경로는 작성 중인 파일을 기준으로 상대 경로를 입력
background-size: contain; 이미지의 비율을 유지하면서 영역 안을 전체 이미지로 가득 채움
background-size: cover; 이미지가 조금 잘리더라도 영역을 가득 채워 배치
background-attachment: fixed; 웹 브라우저 기준으로 고정

03-6 웹 페이지의 레이아웃 구성하기

CSS 초기화하기

* {
	margin: 0px;
    padding: 0px;  /*전체 선택자`*`를 이용해 바깥쪽, 안쪽 여백을 0px로 초기화*/
}
ul, ol {
	list-style: none;  /*목록 앞의 •기호를 없앤다*/ 
}
a {
	text-decoration: none;  /* 밑줄 없애기 */  
}

float - 블록 요소 좌우로 배치하기

블록 요소는 화면의 레이아웃을 배치할 때 자동 줄 바꿈하는 특징 때문에 한 줄에 하나의 블록 요소만 넣을 수 있음
float속성은 블록 요소를 강제로 띄워서 화면에 좌우로 배치

속성명	속성값	설명
float	left	요소를 띄워서 왼쪽에 배치
	right	요소를 띄워서 오른쪽에 배치

일반적으로 블록 요소 안에 자식 요소를 넣으면 부모의 블록 요소에는 높잇값을 지정하지 않음.
- 부모 요소가 자식 요소의 높잇값을 자동으로 인지하여 감싸줌
float 속성을 이용해서 블록 요소를 강제로 띄우면 부모 요소는 float 속성이 적용된 요소의 높잇값을 인식할 수 없음.

position - 요소를 자유롭게 배치하기

속성명	속성값	설명
position	relative	적용된 요소의 현재 위칫값을 기준으로 상대 위치를 지정
	absolute	부모 요소의 특정 구간을 기준으로 절대 위치 지정
	fixed	웹 브라우저 기준으로 절대 위치 지정

relative 속성에도 좌푯값을 입력할 수 있지만 원래 위치한 값을 유지한 상태에서 상대적으로 이동한다는 점 주의해야 한다.
실무에서 relative 속성은 특정 요소의 위치를 배치하는 것보다 absolute 속성의 기준점을 설정하는 용도로 많이 사용

.box를 기준으로 부모 태그에 position속성을 적용한 요소가 없기 때문에 최상위 태그인 <body>를 기준으로 요소를 오른쪽으로 20px, 아래쪽으로 30px 이동해서 배치

object-fit - 컨텐츠를 특정 영역에 채우기

속성명	속성값	설명
object-fit	fill	요소의 비율을 무시하고 가득 채움
	cover	요소의 비율을 유지하면서 여백없이 가득 채움
	contain	요소의 비율을 유지하면서 콘텐츠가 잘리지 않게 가득 채움

z-index - 겹쳐 있는 요소의 z축 순서 지정하기

속성명	속성값	설명
z-index	순섯값	요소에 z축의 순서를 지정. 값이 큰 요소가 위로 올라감

opacity - 요소의 투명도 설정하기

속성명	속성값	설명
opacity	0~1	요소의 투명도를 지정

0은 완전 투명, 1은 완전 불투명

03-7 다양한 그래픽 효과 적용하기

box-shadow, text-shadow - 요소의 그림자 만들기

속성명	속성값	설명
box-shadow	가로축 / 세로축 / 퍼짐 정도 / 색상	블록 요소의 그림자를 만듬
text-shadow	가로축 / 세로축 / 퍼짐 정도 / 색상	텍스트의 그림자를 만듬

border-radius - 모서리를 둥글게 만들기

속성명	속성값	설명
border-radius	px, %	모서리를 속성값만큼 둥글게 만듬

linear-gradient, radial-gradient - 그레이디언트 적용하기

속성명	속성값	설명
gradient	linear-gradient(방향, 색상1, 색상2)	직선 모양의 그레이디언트를 적용
	radial-gradient(색상1, 색상2)	타원 모양의 그레이디언트를 적용

filter - 특수 효과 사용하기

속성명	속성값	설명
filter	blur	요소의 흐림 효과 조절
	brightness	요소의 밝기 조절
	contrast	요소의 명도 대비 조절
	grayscale	요소의 흑백 지정
	hue-rotate	요소의 색상 단계 조절
	invert	요소의 색상 반전 단계 조절
	saturate	요소의 채도 조절
	sepia	요소의 갈색 톤 단계 조절

권순천

신입 개발자가 되기 위해 공부하고 있습니다.

이전 포스트

[인터랙티브 웹 페이지 만들기] 2장 | HTML 기본 문법 빠르게 끝내기

다음 포스트

[인터랙티브 웹 페이지 만들기] 3장 | CSS 기본 문법 빠르게 끝내기

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

03-1 HTML에 CSS연결하기

HTML 파일에 외부CSS 파일 입력하기

03-2 CSS로 HTML 요소 다양하게 선택하기

전체 선택자 - 모든 HTML 요소를 한꺼번에 선택하기

태그 선택자 - 태그명을 이용하여 선택하기

자손 선택자 - 자식과 하위 요소를 모두 선택하기

자식 선택자 - 직계 자식 요소만 선택하기

그룹 선택자 - 여러 개의 요소를 그룹으로 선택하기

순서 선택자 - 형제 요소의 순서를 이용하여 선택하기

수열 선택자 - 수식을 이용하여 선택하기

마지막 요소 선택자 - 형제 요소 중 마지막 요소를 선택하기

홀수, 짝수 선택자 - 홀수 또는 짝수 요소를 선택하기

수열 선택자 - 수식을 이용하여 선택하기

가상 선택자 - 가상의 요소를 선택하기

클래스 선택자 - 클래스명으로 요소를 선택하기

아이디 선택자 - 아이디명으로 요소를 선택하기

03-3 폰트 스타일링하기

폰트 굵기 바꾸기

폰트 크기 바꾸기

폰트 모양 바꾸기

구글 웹 폰트 사용하기

웹 폰트 아이콘 적용하기

폰트 색상 바꾸기

텍스트 줄 간격 바꾸기

텍스트 정렬 방향 지정하기

텍스트 자간 지정하기

03-4 웹 페이지에서 영역별 크기 정하기

너비와 높이 지정하기

바깥쪽 여백 지정하기

안쪽 여백 지정하기

기존 박스 크기를 유지하면서 안쪽 여백 지정하기

테두리의 형태 지정하기

블록 요소와 인라인 요소

03-5 웹 페이지의 배경 꾸미기

배경색 지정하기

배경 이미지 삽입하기

03-6 웹 페이지의 레이아웃 구성하기

CSS 초기화하기

float - 블록 요소 좌우로 배치하기

position - 요소를 자유롭게 배치하기

object-fit - 컨텐츠를 특정 영역에 채우기

z-index - 겹쳐 있는 요소의 z축 순서 지정하기

opacity - 요소의 투명도 설정하기

03-7 다양한 그래픽 효과 적용하기

box-shadow, text-shadow - 요소의 그림자 만들기

border-radius - 모서리를 둥글게 만들기

linear-gradient, radial-gradient - 그레이디언트 적용하기

filter - 특수 효과 사용하기

[인터랙티브 웹 페이지 만들기] 2장 | HTML 기본 문법 빠르게 끝내기

[인터랙티브 웹 페이지 만들기] 4장 | 인터랙티브 웹을 위한 CSS 다루기

0개의 댓글