[CSS] 기초3

---

목차

• 글자폰트

  • 글자 크기

  •  Font Family

  • 폰트 모양

• 웹폰트

  • 컴퓨터에서 폰트 불러오기

  • 웹에서 폰트 불러오기

  • 아이콘 불러오기

• 커서모양바꾸기

• 리스트모양바꾸기

  • 원하는 이미지로 리스트 모양 바꾸기

• 레이아웃

  • border 영역 설정

  • 둥근 border 만들기

  • padding  값 주기

  • margin 값 주기

  • div와 span 같이 사용

• Table Border 꾸미기

• Display Property

  • block과 inline 바꾸기

  • 보임 / 숨김 기능 만들기

• Position Property

  • position 사용하기

  • x, y, z축 순서 바꾸기

• Website Layout  만들기 예제

  • 웹사이트 레이아웃 만들기

  • overflow 속성

    • visible 요소

    • hidden 요소

    • scroll 요소

    • auto 요소

  • float 속성

    • float 속성값

    • 사용법

    • 예제

  • 가상요소 :after와 :before

    • 가상요소

    • 대표적인 가상요소들

    • ::after 사용법

---

ㅁ글자체 (Font)

글자체는 항상 사용자 중심으로 만들어야 한다.

 

만약 개발자 서버에는 폰트가 있는데 사용자pc에는 폰트가 없다면 폰트 표현이 되지 않는다.

 

 

ㅇ글자 크기

글자크기의 단위는 px(pixel) 또는 pt(point)이다.

기본 크기는 16px이다.

 

em은 배율이고 (2em이면 2배율), %는 퍼센트이다.

 

 

ㅇFont Family

font-family 사용

왜 family인가?

만약 사용자 pc에 한 개의 폰트가 없을 경우 다른 폰트를 사용할 수 있도록 

폰트 리스트로 정의해야 한다.

아래와 같이 유사한 폰트를 같이 정의해준다.

.serif {
  font-family: "Times New Roman", Times, serif;
}

.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Lucida Console", Courier, monospace;
}

 

 

ㅇ폰트 모양(Font Style)

폰트의 모양을 바꿔주고 굵기도 바꿔줄 수 있다.

모양은 font-style 이고 굵기는 font-weight 이다.

oblique는 italic과 매우 비슷한 폰트이다.

 

ㅁ웹 폰트 (Web Fonts)

사용자도 개발자가 작성한 폰트를 사용할 수 있도록 웹에서 폰트를 받는 것을 말한다.

웹에서 다양한 폰트를 보기 위해서는 다음 사이트에서 찾을 수 있다.

fonts.google.com/

Google Fonts

 

ㅇ폰트 불러오기

로컬 디렉터리에 있는 폰트를 불러온다.

@에서 불러올 폰트의 이름과 경로를 정의한다.

font-family의 속성을 myfont라고 하고 sec속성에 폰트의 경로를 설정한다.

 

ㅇ폰트 웹에서 불러오기

이번에는 구글 폰트 사이트에서 'Sofia'라는 폰트를 가져와서 사용해본다.

 

 

ㅇ아이콘을 웹에서 불러오기

아이콘도 폰트와 비슷하다.

 

 

 

ㅁ커서 모양바꾸기 (Cursor)

커서의 모양은 태그 style 속성에서 "cursor: 속성값"으로 나타낸다.

글 위에 마우스를 갖다대면 커서 모양이 바뀌어있음을 알 수 있다.

 

ㅁ리스트 모양바꾸기 (Cursor)

클래스속성을 이용해서 먼저 헤드 태그 안에서 각각의 클래스의 list-style-type을 정의해준다.

그리고 바디 태그 안에서 순서가 없는 리스트와 순서가 있는 리스트 태그들에 class 속성을 부여해서 

리스트의 모양이 바뀌게 한다.

 

 

ㅇ원하는 이미지로 리스트 모양 바꾸기

위 코드에서 ul.a 셀렉터를 원하는 이미지로 정의한다.

url에는 이미지의 경로를 집어넣는다.

 

 

 

ㅁ레이아웃 (Layout=Box Model)

하나의 웹 페이지를 구역을 나눠서 사용하고 싶으면 예전에는 <table>태그를 사용했는데

요새는 <div>와 css 를 같이 사용해서 레이아웃을 만들 수 있다. 이를 박스 모델(Box Model)이라고 한다.

박스는 Margin, border, padding와 width, height를 이용해서 박스를 만들 수 있다.

content : 박스 안의 텍스트나 이미지 등 내용을 의미

padding : content 주변의 공간을 의미

border : content와 padding 주변의 공간을 의미. 외곽선을 의미

margin : border의 바깥 공간을 의미

 

먼저 div에 배경을 크기를 지정해서 정의한다.

이렇게 영역이 있는 것을 Block Tag라고 한다.

 

이제 여기에 border값을 정의한다.

border는 width, style, color 보통 이 세 개를 같이 사용한다.

 

 

border-style을 바꿔본다.

 

위의 border 내용을 한 줄로 간략히 쓰려면 아래와 같다.

 

ㅇborder 각각의 영역을 설정

이번에는 border의 상하좌우 각각의 영역을 다르게 정의해본다.

border-width 속성의 값은 상; 우; 하; 좌; 를 의미한다.

p.one의 5px 은 위 아래를 의미, 20px은 좌우를 의미한다.

p.two도 마찬가지이다.

p.three는 첫 번째부터 상, 우, 하, 좌를 의미한다.

색깔도 위와 같은 방법으로 다르게 설정할 수 있다.

또한 아래와 같이 각 위치마다 스타일도 다르게 설정할 수 있다.

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

 

ㅇ둥근 Border 만들기

 

이를 이용해서 버튼을 만들 수 있다.

셀렉터에 div:hover 라고 입력하면 된다.

 

ㅇpadding 값 주기

 

 

ㅇmargin 값 주기

빨간원을 그려놓은 곳에 20px만큼의 공간이 생긴 것을 알 수 있다.

 

 

ㅇdiv와 span 같이 사용

 

 

ㅁTable Border 꾸미기

table의 border 또한 값을 지정해서 꾸밀 수 있다.

 

 

 

ㅁDisplay Property

ㅇblock과 inline 바꿔주기

block 과 inline의 차이점은 enter 키가 입력되는지 아닌지이다.

기본적으로 div는 block이고, span은 inline이다.

 

 

여기에 display 속성을 이용해서 이 block과 inline을 서로 바꿔준다.

 

링크를 행으로 나타낼 수도 있다.

원래 <li> 태그를 쓰면 엔터키가 눌리는데 이를 inline으로 바꿔준다.

 

 

ㅇ보임/숨김 기능 만들기

특정 태그의 내용을 숨길 수 있다.

-display: none; 이용

아예 div id="i1" 영역이 사라지고 div id="i2" 영역이 바로 나온다.

 

-visibility: hidden; 사용

div id="i1" 영역만 남고 div id="i2" 영역이 그 밑에 나온다.

 

 

ㅁposition property

ㅇposition 사용하기

position이란 태그들의 위치를 결정하는 css이다.

종류로는 다음과 같다.

-static

-relative

-fixed

-absolute

-sticky

 

내가 원하는 위치에 div를 놓을 수 있다.

 

ㅇz축의 순서 바꾸기

기존 2차원인 블록들을 z-index 속성을 이용해서 3차원상에서 순서를 바꿀 수 있다.

z-index: 1; 이면 z축 가장 아래에 위치되고 

z-index: 3; 이면 z축 가장 위쪽에 위치된다.

 

---

ㅁWebsite Layout 만들기 예제

ㅇ웹 사이트 레이아웃 만들기

www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_blog

Tryit Editor v3.6

위 사이트의 예제를 만들어본다.

소스코드는 아래와 같고 여기에서 사용되는 속성을 알아보자.

<!DOCTYPE html>
<html>
    <head>
        <style>
            * {box-sizing: border-box;}

            body {
                font-family: Arial;
                padding: 10px;
                background: #f1f1f1;
            }

            /* headrer/blog title */
            .header {
                padding: 30px;
                text-align: center;
                background: white;
            }

            .header h1 {
                font-size: 50px;
            }

            /* style top navigation bar */
            .topnav {
                overflow: hidden; /*영역을 벗어나는 컨텐츠는 잘려져서 보이지 않게함*/
                background-color: #333;
            }

            /* style topnav links */
            .topnav a {
                float: left;  /*css에서 정렬하기 위해 사용되는 속성. 각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치할 때 사용*/
                display: block;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

            /* Change color on hover */
            .topnav a:hover {
                background-color: #ddd;
                color: black;
            }

            /* Create two unequal columns that floats 
            next to each other */
            /* Left column */
            .leftcolumn {
                float: left;
                width: 75%;
            }

            /* Right column */
            .rightcolumn {
                float: left;
                width: 25%;
                background-color: #f1f1f1;
                padding-left: 20px;
            }

            /* Fake image */
            .fakeimg {
                background-color: #aaa;
                width: 100%;
                padding: 20px;
            }

            /* Add a card effect for articles */
            .card {
                background-color: white;
                padding: 20px;
                margin-top: 20px;
            }

            /* Clear floats after the columns */
            .row:after { /*:실제내용 바로 뒤에서 생성되는 자식요소. after 가상선택자는 꾸밈을 위해서 의미없는 태그를 추가할 때 사용한다. 여기서는 display: table을 설정하기 위해 가상선택자를 만들었다. 이를 쓸 때는 content속성이 꼭 필요하다.(content=""는 가짜 속성이다.)*/
                content: "";
                display: table; /*div박스를 세로로 정렬하고자 할 때 table요소로 만들어준다.*/
                clear: both; /*왼쪽, 오른쪽 모두 붙는 float 정렬을 취소시켜준다.*/
            }

            /* Footer */
            .footer {
                padding: 20px;
                text-align: center;
                background: #ddd;
                margin-top: 20px;
            }
        </style>
    </head>

    <body>
        <!--웹사이트제목-->
        <div class="header"> 
            <h1>My Website</h1>
            <p>Resize the browser window to see the effect.</p>
        </div>

        <!--웹사이트 상단네비게이션-->
        <div class="topnav">
            <a href="#">Link1</a>
            <a href="#">Link2</a>
            <a href="#">Link3</a>
            <a href="#">Link4</a>
        </div>

        <!--웹사이트 내용영역-->
        <div class="row">
            <!--왼쪽 내용영역-->
            <div class="leftcolumn">
                <!--내용영역1-->
                <div class="card">
                    <h2>TITLE HEADING</h2>
                    <h5>Title description, oct 29, 2020</h5>
                    <div class="fakeimg"
                        style="height: 200px;">Image1
                    </div>
                    <p>Some text..</p>
                    <p>Sunt in culpa qui officia deserunt 
                        mollit anim id est laborum consectetur
                        adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna a
                        liqua. Ut enim ad minim veniam, quis 
                        nostrud exercitation ullamco.
                    </p>
                </div>
                <!--내용영역2-->
                <div class="card">
                    <h2>TITLE HEADING</h2>
                    <h5>Title description, oct 28, 2020</h5>
                    <div class="fakeimg"
                        style="height: 200px;">Image2
                    </div>
                    <p>Some text..</p>
                    <p>Sunt in culpa qui officia deserunt 
                        mollit anim id est laborum consectetur
                        adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna a
                        liqua. Ut enim ad minim veniam, quis 
                        nostrud exercitation ullamco.
                    </p>
                </div>
            </div>

            <!--오른쪽 내용영역-->
            <div class="rightcolumn">
                <div class="card">
                    <h2>About Me</h2>
                    <div class="fakeimg"
                    style="height: 200px;">Image3
                </div>
                <p>Some text about me in culpa qui officia 
                    deserunt mollit anim..
                </p>
            </div>
            <div class="card">
                <h3>Popular Post</h3>
                <div class="fakeimg"><p>Image</p></div>
                <div class="fakeimg"><p>Image</p></div>
                <div class="fakeimg"><p>Image</p></div>
            </div>
            <div class="card">
                <h3>Follow Me</h3>
                <p>Some text..</p>
            </div>
        </div>

         <!--맨 밑 내용영역-->
         <div class="footer">
             <h2>Footer</h2>
         </div>

    </body>
</html>

ㅁoverflow 속성

overflow 속성은 content(요소)안에 내용이 너무 길어서 모두 보여주기 힘들 때 그것을 보여주는 기능이다.

 

overflow 속성에서 사용할 수 있는 속성값은 네 가지가 있다.

-visible : 기본값, 글자가 넘칠 경우 상자 밖으로 보여진다. 

-hidden : 넘치는 부분은 잘려서 보이지 않는다.

-scroll : 스크롤바가 추가되어 스크롤할 수 있다.(가로, 세로 모두 추가 가능)

-auto : 컨텐츠 양에 따라 스크롤바를 추가할 지 자동으로 결정된다.

 

ㅇvisible

ㅇhidden

ㅇscroll 

ㅇauto 

ㅁfloat 속성

float 속성은 CSS에서 정렬하기 위해 사용되는 속성이다.

단어 뜻 그대로 어느 위치에 띄우는 것을 의미한다.

문서에 사진과 그림 또는 객체들을 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치할 때 사용된다.

 

ㅇfloat 속성값

float 속성에서 사용할 수 있는 속성값은 다음과 같다.

-none : 띄우지 않음(기본값)

-left : 왼쪽에 띄움

-right : 오른쪽에 띄움

-initial : 기본값을 설정함

-inherit : 부모 요소로부터 상속함

 

ㅇfloat 속성 사용법

1) inline 으로 float 속성 넣기

<img src="image.png" style="float: left";>

 

2) html <head> 영역 <style> 태그에서 사용

<head>
    <style type="text/css">
        img {
            float: left;
        }
    </style>
</head>

 

3) css파일을 별도로 만들어 html문서에 연결

//별도 css파일 (img.css)
img {
    float: left;
}

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

 

ㅇfloat 속성 사용 예제

1) float 속성이 없는 경우

그림 바로 옆 맨 마지막 줄 글자가 붙어서 나온다.

2) float: left; 로 지정한 경우

그림은 왼쪽에 있고 그림 오른쪽에 문자가 나오게 된다.

3) float: right; 로 지정한 경우

그림은 오른쪽에 있고 그림 왼쪽에 문자가 나오게 된다.

4) float: both; 로 지정한 경우

이 속성값은  float: left;와 float: right; 속성값을 해제해서 float 속성이 없는 것과 같은 결과가 나온다.

 

 

ㅁ가상요소 :after와 :before 

ㅇ가상요소(Pseudo-Element)

가상 클래스(pseudo-class)는 별도의 class를 지정하지 않아도 지정한 것처럼 요소를 선택하게 해준다.

가상 요소(pseudo-element)는 가상클래스처럼 선택자(selector)에 추가되며, 

    존재하지 않는 요소를 존재하는 것처럼 부여해서 문서의 특정 부분이 선택되게 해준다.

 

-이해를 돕는 예제

셀렉터를 적용시키려면 원래는 <li id="i1"> 이런식으로 id값을 주고 css에서 #li { ... } 사용해야하지만

가상 클래스나 가상 요소를 사용하면 굳이 id값이나 class 이름을 지정하지 않아도 된다.

 

ㅇ대표적인 가상요소들

요소	내용
::first-line	요소의 텍스트에서 첫 줄에 스타일을 적용
::first-letter	요소의 첫 번째 글자에 스타일을 적용
::before	요소 콘텐츠 시작부분에 생성된 콘텐츠를 추가
::after	요소 콘텐츠 끝부분에 생성된 콘텐츠 추가
::selection	요소 텍스트에서 사용자에 의해 선택(드래그)된 영역의 속성을 변경
::placeholder	Input 필드에 힌트 텍스트에 스타일을 적용

 

-::before, ::after 란?

::before 는 실제 내용 바로 앞에서 생성되는 자식요소

::after 는 실제 내용 바로 뒤에서 생성되는 자식요소

 

-content="" 란?

이들을 사용할 때는 반드시 content 와 함께 쓰인다.

content는 '가짜' 속성이다.

 

 

ㅇ::after 사용 방법

float를 간편하게 after를 사용해 clear할 수 있다.

 

 

 

 

[출처]

-offbyone.tistory.com/296

-aboooks.tistory.com/72

-blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/

-takeuu.tistory.com/60