웹 프로그래밍 멘토멘티 프로그램 2회차

css

HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 언어.

CSS의 C가 Cascading의 약자인데, 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문이다.

이해못해도 됨

css 문법

h1 {
  color: red;
  font-size: 20px
}

주석

p {
  color: red;
  /* This is a single-line comment */
  text-align: center;
} 

/* This is
a multi-line
comment */

Visual Studio Code 꿀팁

Ctrl + / 누르면 자동주석 됨

Selector

CSS 선택자(Selector)란? 선택자란 말 그대로 선택을 해주는 요소입니다.

이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Home Page</title>
    <link rel="stylesheet" type="text/css" href="myhomepage.css">
</head>
<body>
    <div id="box1">박스 아이디1</div>
    <div id="box2">박스 아이디2</div>
    <div id="box3">박스 아이디3</div>
    <div id="box4">박스 아이디4</div>
    <div id="box5">박스 아이디5</div>
    <div id="box6">박스 아이디6</div>
    <div class="boxes">박스 클래스</div>
    <div class="boxes">박스 클래스</div>
    <div class="boxes">박스 클래스</div>
</body>
</html>

실습 HTML 코드

tag

div {
    /* 테두리 굵기, 선 모양, 색상 */
    border: 1px solid black;
    
    /* div안의 text들은 가운데 정렬을 해라! */
    text-align: center;
    
    /* margin을 위에서 부터 시계방향으로 10, 20, 30, 40px 씩 준다.  */
    margin: 10px 20px 30px 40px;
}

div 라는 tag에 스타일링을 적용하겠다.

id

#box1 {
    background-color: aquamarine;
}

box1 이라는 id를 가진 HTML 요소에 스타일링을 적용하겠다.

class

.boxes {
    background-color: blanchedalmond;
}

boxes 라는 class를 가진 HTML 요소에 스타일링을 적용하겠다.

적용한 모습

css를 추가하는 방법 세 가지

External

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

Internal

<head> <style type="text/css"> .logo {color: #eeeeee;} </style> </head>

출처: https://webdir.tistory.com/338 [WEBDIR]

Inline

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

주요 CSS들

margin

margin은 바깥 여백을 말합니다.

    /* margin을 위에서 부터 시계방향으로 10, 20, 30, 40px 씩 준다.  */
    margin: 10px 20px 30px 40px;

또는

margin-top:     10px;
margin-right:   20px;
margin-bottom:  30px;
margin-left:    40px;

위로 이렇게 각각의 방향에 따로따로 적용시켜 줄 수도있습니다.

상우하좌 순입니다.

border

border는 테두리를 나타내는 Attribute입니다.

    /* 테두리 굵기, 선 모양(속성), 색상 */
    border: 1px solid black;

padding

padding은 테두리 안에서 테두리와 컨텐츠의 공간을 말합니다.

#box3 {
	/* 위에서 부터 시계 방향으로 적용합니다 */
    padding : 10px 20px 30px 40px;
    
/* 
    아래의 코드와 같습니다.
    padding-top:     10px;
    padding-right:   20px;
    padding-bottom:  30px;
    padding-left:    40px; 
*/
}

display

display 속성은 요소를 어떻게 보여줄지를 결정합니다.
주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다.

none : 보이지 않음
block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태

block

div 태그, p 태그, h 태그, li 태그 등이 이에 해당됩니다.

기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락입니다.

width, height 속성을 지정 할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링됩니다.

inline

span 태그, b 태그, i 태그, a 태그 등이 이에 해당됩니다.

block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.

inline-block

block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있습니다.

    <div id="inline-box1">인라인 박스</div>
    <div id="inline-box2">인라인 박스</div>
    <div id="block-box1">블락 박스</div>
    <div id="block-box2">블락 박스</div>

#inline-box1, #inline-box2{
    display: inline;
}

#block-box1, #block-box2{
    display: block;
}

display 표시 형태

visibility 가시성

opacity 투명도

overflow 내용물이 넘칠 경우의 처리 방식

position 위치 지정 방식

top 위

right 오른쪽

bottom 아래

left 왼쪽

z-index 요소의 상하 위치

float 요소의 부유 방식

width 넓이

height 높이

margin 마진

padding 패딩

box-sizing 크기 지정 방식

border 테두리

border-color 테두리 색상

border-style 테두리 형태

border-width 테두리 두께

border-radius 테두리 곡률

border-image 테두리 이미지

outline 테두리 외곽

outline-color 테두리 외곽 색상

outline-width 테두리 외곽 두께

background 배경

background-attachment 배경 부착 방식

background-color 배경 색상

background-image 배경 이미지

background-position 배경 위치

background-repeat 배경 반복 형식

background-clip 배경 적용 범위

background-origin 배경 중심 위치

background-size 배경 크기

font 폰트

font-family 폰트 종류

font-size 폰트 크기

font-style 폰트 형태

font-variant 폰트 변형

font-weight 폰트 두께

color 폰트 색상

direction 폰트 진행 방향

letter-spacing 폰트 간격

line-height 폰트 줄 높이

text-align 폰트 정렬 방식

text-decoration 글자 꾸밈 방식

text-indent 폰트 들여쓰기 크기

text-transform 폰트 변환

vertical-align 폰트 수직 정렬 방식

white-space 폰트 공백 처리 방식

text-overflow 폰트가 넘칠 경우의 처리 방식

word-spacing 단어 간격

word-wrap 단어가 넘칠 경우의 처리 방식

참고

https://namu.wiki/w/CSS

www.w3schools.com/Css/tryit.asp?filename=trycss_syntax2

https://potionstory.tistory.com/12

'대내 활동 > 웹프로그래밍 상상튜터링' 카테고리의 다른 글

웹 프로그래밍 멘토멘티 프로그램 5회차 (0)	2020.09.20
웹 프로그래밍 멘토멘티 프로그램 4회차 (0)	2020.09.12
웹 프로그래밍 멘토멘티 프로그램 3회차 (2)	2020.09.05
웹 프로그래밍 상상튜터링 프로그램 1회차 (0)	2020.08.25