본문 바로가기
Front-End/HTML_CSS

[HTML/CSS] 220317 학습일기

승니 2023. 3. 18. 04:35

https://www.udemy.com/course/so_easy_html_css/

유데미 <너무 쉬운 HTML/CSS 입문> 에서 학습한 내용을 정리하였다.

 

이제 CSS에 대해서 알아보자.

1.

CSS: 웹의 전반적인 스타일을 미리 저장해 둔 스타일시트

 

2. 인라인 스타일(In-line Style) 속성

<h1 style="color:red;">Heading 1</h1>
<h1>Heading 2</h1>

-거의 대부분의 HTML 태그에 사용할 수 있는 속성

-화면에 보여지는 visual한 상세 설정이 가능함.

 

웹페이지에는 다음과 같이 표시됨.

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="color:red;">Heading 1</h1>
    <h1>Heading 2</h1>
</body>
</html>

 

 

3. CSS

-Cascading Style Sheet의 약자

-cascade: 폭포

- 즉 계단식 폭포와 같이 상위요소-> 하위요소로 차례로 스타일 적용

 

4. 페이지 스타일 Page style

<head>
    <style>h1{
        color:blue;
    }</style>
</head>
<body>
    <h1>Heading 1</h1>
    <h1>Heading 2</h1>

page의 <head>영역에서 그 밑의 요소들(ex.<h1>)의 스타일을 지정해줄 수 있음.

 

웹페이지에는 다음과 같이 표시됨.

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>h1{
        color:blue;
    }</style>
</head>
<body>
    <h1>Heading 1</h1>
    <h1>Heading 2</h1>
</body>
</html>

 

 

5. 사이트 스타일 Site style

<head>
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1>Heading 1</h1>
    <h1>Heading 2</h1>

- 사이트 전체적으로 스타일을 정해 사용하고 싶다면 style sheet 파일을 별도로 만들어 사용할 수 있음.

- <head>에 <link rel="stylesheet">태그. 여기서 rel은 relation의 약자.

 

더보기

HTML 파일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1>Heading 1</h1>
    <h1>Heading 2</h1>
</body>
</html>

 

main.css 파일

h1 {
    color:blue;
}

 

6.

인라인 스타일, 페이지 스타일, 외부에서 가지고 올 수 있는 스타일시트 파일

로 스타일을 지정해서 사용할 수 있음.

 

  • 인라인 스타일

style= "속성:값; 속성:값;"

 

 

  • 페이지 스타일

<head><style> ... </style></head>

 

 

  • 사이트 스타일

<link rel="stylesheet" href ="main.css">

 

 

 

7.

알려주신 스타일이 적용된 결과를 확인하기

 

Html 파일은 아래와 같고

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    <style>
        h1 {
            color:blue;
        }
    </style>
</head>
<body>
    <h1 style="color:red;">Heading 1</h1>
    <h1>Heading 2</h2>
</body>
</html>

 

 

main.css 파일은 아래와 같을 때

h1 {
    color:green;
}

 

웹페이지에는 어떻게 표시될까?

이렇게 표시된다.

 

자 이제 이 페이지에서 검사를 해보자.

그러면 이렇게 뜬다.

 

style이 어떻게 적용이 되었는지를 보여주는데 가장 나중에 적용된 것이 위에 있고 가장 먼저 적용된 것이 아래에 있다.

 

 

8.

스타일이 어떻게 적용되었는지 보자.

user agent style sheet는 웹 브라우저가 기본적으로 제공해주는 스타일.

-> main.css 파일 -> 10_CSS_basic.html의 60번째 줄 -> element.style

 

검사 창의 코드를 변경할 수도 있다.

 

CSS selector에 대해 알아보자.

 

9.

어떤 css의 rule이 어떤 element에 적용될 것인지 선택해주는 기능이 css selector.

 

 

10. #id

id는 일반적으로 전체 페이지에서 element들이 id값을 다 다르게 가져가도록 하기 때문에 그 페이지에서 특정 요소 하나를 지정해서 style을 지정하게 함.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #heading2{
            color:blue;
        }
    </style>
</head>
<body>
    <style>
        #heading1{
            color:red;
        }
    </style>

    <h1 id="heading1">Heading 1</h1>
    <h2 id="heading2">Heading 2</h2>
</body>
</html>

style 태그는 어디에 써주든 상관 없다.

 

 

11. 태그명 tag

<style>
    h1 {
        color:red;
    }
</style>
<h1>Heading</h1>
<p>Hello</p>

 

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        h1 {
            color:red;
        }
    </style>
    <h1>Heading</h1>
    <p>Hello</p>
</body>
</html>

 

 

12.     .클래스명

 

여러개의 클래스를 넣을 수 있다.

자주 쓰인다.

<style>
    .font-red {
        color:red
    }

    .bolded {
        font-weight: bold;
    }
</style>

<h1 class="font-red">Heading</h1>
<p class="font-red">Hello</p>
<p class="font-red bolded">Hello</p>
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .font-red {
            color:red
        }

        .bolded {
            font-weight: bold;
        }
    </style>

    <h1 class="font-red">Heading</h1>
    <p class="font-red">Hello</p>
    <p class="font-red bolded">Hello</p>
</body>

</html>

 

 

13.   태그명.클래스명(1)

 

summer-style이라는 하나의 클래스에 <h1>에 적용될 버전, <p>에 적용될 버전 이렇게 나눠서 정해줄 수 있다.

<style>
    h1.summer-style {
        color:blue;
    }

    p.summer-style {
        color:lightblue;
    }
</style>

<h1 class="summer-style">Heading</h1>
<p class="summer-style">Hello</p>
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        h1.summer-style {
            color:blue;
        }

        p.summer-style {
            color:lightblue;
        }
    </style>

    <h1 class="summer-style">Heading</h1>
    <p class="summer-style">Hello</p>
    
</body>
</html>

 

 

14.   태그명.클래스명(2)

<style>
    h1,p, .font-red {
        color:red;
    }

    h1,p, .font-blue {
        color:blue;
    }
</style>

<h1>Hi</h1>
<h1 class="font-red">Heading</h1>

여러개의 태그를 한 클래스에 지정해줄 수도 있는데

여기서 위에서 .font-end에 지정해준 <h1> 태그를 아래에 아무 클래스 속성 없이 써줄 경우 위의 정의해준 클래스 속성에 맞게 따라간다.

이게 좀 헷갈렸음.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        h1,p, .font-red {
            color:red;
        }

        h1,p, .font-blue {
            color:blue;
        }
    </style>

    <h1>Hi</h1>
    <h1 class="font-red">Heading</h1>

    
</body>
</html>

h1과 p에 똑같이 .font-red와 .font-blue를 지정해줬는데 첫번째 <h1>에서는 .font-red보다 나중에 정의해준 font-blue가 적용이 되었고 두번째 <h1>은 아예 클래스 속성을 지정해주었으므로 font-red가 적용되었다.

 

 

15. 회원가입 창에 스타일을 적용해보자.

 

<th>에 파란색 글자를 적용하고 <label>에 볼드체를 적용하였다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        th {
            color:blue;
        }

        label
        {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form action="abc.html">
        <table>
            <tr>
                <th colspan="2">Please input your information</th>
            </tr>

            <tr>
                <td><label for="FirstName">First Name</label></td>
                <td><input type="text" name="FirstName"></td>
            </tr>

            <tr>
                <td><label for="LastName">Last Name</label></td>
                
                <td><input type="text" name="LastName"></td>
            </tr>

            <tr>
                <td><label for="Email">Email</label></td>
                <td><input type="text" name="Email" size="30"> <input type="button" name="EmailConfirm" value="Email Confirm"></td>
                
            </tr>
            
            <tr>
                <td><label for="Password">Password</label></td>
                
                <td><input type="password" name="Password" size="15"></td>
            </tr>

            <tr>
                <td><label for="PasswordConfirm">Password Confirm</label></td>
                
                <td><input type="password" name="PasswordConfirm" size="15"></td>
            </tr>

            <tr>
                <td><label for = "Region">Region</label></td>
                
                <td>
                    <select name="Region" size="3">
                        <option value="APAC">APAC</option>
                        <option value="America">America</option>
                        <option value="EMEA">EMEA</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td rowspan="2"><label for = "Membership">Membership</label></td>
                
                <td>
                    <input type="radio" name="Membership" value="free" id="Free" checked>
                    <label for = "Free">Free</label>
                    <input type="radio" name="Membership" value="basic" id="Basic">
                    <label for = "Basic">Basic</label>
                    <input type="radio" name="Membership" value="premium" id="Premium">
                    <label for = "Premium">Premium</label>
                </td>
            </tr>

            <tr>
                <td><label for="StartDateTime">Start Date/Time:</label>
                <input type="date" name="StartDateTime">
                <input type="time" name="StartDateTime"></td>
            </tr>

            <tr>
                <td><label for= "age">Age</label></td>
                <td><input type="number" min="1" max="99"></td>
            </tr>

            <tr>
                <td><label for ="FavoriteColor">Favorite Color</label></td>
                <td><input type="color" name="Favorite Color?"></td>
            </tr>

            <tr>
                <td><label for ="EmailNewsletter">Email Newsletter</label></td>
                <td>
                    <input type="checkbox" name="EmailNews">
                    <label for = "EmailNews">Yes I will receive email newsletter</label>
                </td>
            </tr>
        </table>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

HTML 단위에 대해 알아보자.

 

16.

화면을 그릴때는 pixel 사용.

단, 출력물에서는 cm,mm,in 사용

 

px는 화면 해상도에 따라 실제 보여지는 크기는 바뀔 수 있다.

 

 

17. 절대 길이 단위

<style>
    h1 {
        border:1px solid; width:300px;
    }

    h2 {
        border:1px solid; width:10cm;
    }
</style>

<h1>Heading 1- 300px</h1>
<h2>Heading 2- 10cm</h2>
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        h1 {
            border:1px solid; width:300px;
        }

        h2 {
            border:1px solid; width:10cm;
        }
    </style>

    <h1>Heading 1- 300px</h1>
    <h2>Heading 2- 10cm</h2>
</body>
</html>

 

18. 상대 길이 단위

 

%: 상위 요소의 길이에 대한 비율

 

em: 현재 폰트 길이(font-size)에 대한 비율, 1em:100%

 

rem: 최상위(html) 요소의 폰트 크기(font-size)에 대한 비율, 1rem: 100%. r은 root를 의미.

 

 

19. 상대 길이 단위를 활용해보기.

    <style>
        html {font-size: 16px;}
        p { border: 1px solid;
            font-size: 2em;
            width: 20%;}
        #b1 {font-size: 2em;}
        #b2{ font-size: 2rem;}
    </style>
</head>
<body>
    Mom,
    <p>I'm <b id="b1">Not</b> a kid.</p>
    <p>Yes you <b id="b2">ARE.</b></p>
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {font-size: 16px;}
        p { border: 1px solid;
            font-size: 2em;
            width: 20%;}
        #b1 {font-size: 2em;}
        #b2{ font-size: 2rem;}
    </style>
</head>
<body>
    Mom,
    <p>I'm <b id="b1">Not</b> a kid.</p>
    <p>Yes you <b id="b2">ARE.</b></p>
</body>
</html>

 

 

20. 색상 Color

 

웹은 기본적으로 RGB24 색상을 이용함.

 

색상명: red,green,blue 등

 

rgb(rrr,ggg,bbb) : 각 항목별 0~255 값

 

#rrggbb: 16진수로 rgb값 표시.

 

    <style>
        h1{ color:red;}
        h2{ color:rgb(0,255,0);}
        h1{ color:#0000ff;}
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        h1{ color:red;}
        h2{ color:rgb(0,255,0);}
        h3{ color:#0000ff;}
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    
</body>
</html>

 

 

21. 회원가입 창에 스타일을 적용해보자.(2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        html{font-size: 16;}
        table{border: 1px solid; width: 600px; height: 550px;}
        tr{
            line-height: 1em;
        }
        th {
            font-size:1.5em;
            color:skyblue;
        }

        label
        {
            font-size: 1em;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form action="abc.html">
        <table>
            <tr>
                <th colspan="2">Please input your information</th>
            </tr>

            <tr>
                <td><label for="FirstName">First Name</label></td>
                <td><input type="text" name="FirstName"></td>
            </tr>

            <tr>
                <td><label for="LastName">Last Name</label></td>
                
                <td><input type="text" name="LastName"></td>
            </tr>

            <tr>
                <td><label for="Email">Email</label></td>
                <td><input type="text" name="Email" size="30"> <input type="button" name="EmailConfirm" value="Email Confirm"></td>
                
            </tr>
            
            <tr>
                <td><label for="Password">Password</label></td>
                
                <td><input type="password" name="Password" size="15"></td>
            </tr>

            <tr>
                <td><label for="PasswordConfirm">Password Confirm</label></td>
                
                <td><input type="password" name="PasswordConfirm" size="15"></td>
            </tr>

            <tr>
                <td><label for = "Region">Region</label></td>
                
                <td>
                    <select name="Region" size="3">
                        <option value="APAC">APAC</option>
                        <option value="America">America</option>
                        <option value="EMEA">EMEA</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td rowspan="2"><label for = "Membership">Membership</label></td>
                
                <td>
                    <input type="radio" name="Membership" value="free" id="Free" checked>
                    <label for = "Free">Free</label>
                    <input type="radio" name="Membership" value="basic" id="Basic">
                    <label for = "Basic">Basic</label>
                    <input type="radio" name="Membership" value="premium" id="Premium">
                    <label for = "Premium">Premium</label>
                </td>
            </tr>

            <tr>
                <td><label for="StartDateTime">Start Date/Time:</label>
                <input type="date" name="StartDateTime">
                <input type="time" name="StartDateTime"></td>
            </tr>

            <tr>
                <td><label for= "age">Age</label></td>
                <td><input type="number" min="1" max="99"></td>
            </tr>

            <tr>
                <td><label for ="FavoriteColor">Favorite Color</label></td>
                <td><input type="color" name="Favorite Color?"></td>
            </tr>

            <tr>
                <td><label for ="EmailNewsletter">Email Newsletter</label></td>
                <td>
                    <input type="checkbox" name="EmailNews">
                    <label for = "EmailNews">Yes I will receive email newsletter</label>
                </td>
            </tr>
            <tr><td></td></tr>
            <tr>
                <td><input type="submit" value="Submit"></td>
            </tr>
        </table>
        
    </form>
</body>
</html>

 

 

 

박스 모델에 대해 알아보자.

 

22. 박스모델(Box model)

 

모든 HTML 요소는 박스로 취급된다.

 

  • content: 내용
    • width: content의 너비
    • height: content의 높이
  • padding: 안쪽 여백
  • border: 테두리
  • margin: 바깥쪽 여백

-width, height를 지정하면 content의 크기만 지정된다.

 

23. 박스모델 코드로 알아보기

    <style>
        p {width:300px; height: 100px;
        border:10px solid gray;
        padding:30px; margin:10px}
    </style>
</head>
<body>
    <p>This is an example of box model</p>
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {width:300px; height: 100px;
        border:10px solid gray;
        padding:30px; margin:10px}
    </style>
</head>
<body>
    <p>This is an example of box model</p>
</body>
</html>

그러면 이렇게 나오고 검사를 해보면

이렇게 구성되어있음을 알 수 있다.

 

 

24.  Padding

    <style>
        p { width:200px; height: 50px;
            border:1px solid gray;}
    </style>
</head>
<body>
    <p style="padding-left:10px;">Padding test</p>
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p { width:200px; height: 50px;
            border:1px solid gray;}
    </style>
</head>
<body>
    <p style="padding-left:10px;">Padding test</p>
</body>
</html>

똑같은 방법으로 padding-right, padding-bottom, padding-top도 설정해줄 수 있고

padding 자리에 border, margin도 들어갈 수 있다.

-필요한 경우에 방향을 지정해서 사용할 수 있다.

 

 

25. border 보더

    <style>
        p {width:200px; height: 50px;;
            border:1px dotted gray;}
    </style>
</head>
<body>
    <p style="border-left:3px solid red;">Border Test</p> 
    <p style="border-right:3px solid red;">Border Test</p> 
    <p style="border-top:3px solid red;">Border Test</p> 
    <p style="border-bottom:3px solid red;">Border Test</p> 
</body>
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {width:200px; height: 50px;;
            border:1px dotted gray;}
    </style>
</head>
<body>
    <p style="border-left:3px solid red;">Border Test</p> 
    <p style="border-right:3px solid red;">Border Test</p> 
    <p style="border-top:3px solid red;">Border Test</p> 
    <p style="border-bottom:3px solid red;">Border Test</p> 
</body>
</html>

 

dotted는 점선을 의미한다.

 

 

26. 마진 margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{width:200px; height: 50px;
        border:1px solid gray;}
        .no-margin { margin:0px;}
    </style>
</head>
<body>
    <p class="no-margin">Margin Test</p>
    <p class="no-margin">Margin Test</p>
    <p>Margin Test</p>
    <p>Margin Test</p>
</body>
</html>

 

 

margin값을 0으로 하여 그림 여러개를 붙일 때 자주 사용된다.

 

margin-top값이 음수이면 위의 그림과 겹치게 된다.

 

폰트에 대해 알아보자.

 

 

27. font-family 속성

-내가 사용하고자 하는 폰트명을 먼저 지정하고, 만약 해당 폰트가 적용이 안 될 경우에는 그 다음 폰트가 적용되도록 함.(우선 순위를 정해놓은 것.)

- 폰트는 내 PC에 설치가 되어야 그 폰트대로 화면에 보이게 할 수 있음.

각각의 PC마다 다양한 폰트를 가지고 있을 확률이 높음. 

제일 첫번째 폰트를 먼저 적용해보고, 그 폰트가 깔려있지 않다거나 그 폰트가 해당 언어를 지원하지 않을 경우, 그 다음 폰트를 사용함.

=> font-family

 

-sans-serif는 폰트 이름이 아님. 종류를 의미함. 

serif 종류가 있고 san-serif 종류가 있음.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body { font-family: 굴림, sans-serif}
    </style>
</head>
<body>
    <p>안녕하세요111!</p>
    <p>Hello, world111!</p>
    <p style="font-family: 궁서, 바탕;">안녕하세요222!</p>
    <p style="font-family: Tahoma, Verdana">Hello, world222!</p>
</body>
</html>

<style>에서 <body> 태그에 대해서 font-family가 정의되어있기 때문에

뒤의 <body> 태그 내에 특별히 폰트가 정의가 안 되어있으면 굴림이나 sans-serif가 적용되게 됨.(안녕하세요111, hello world111)

 

안녕하세요222는 궁서체가 있으면 궁서체로 표시하고, 없으면 바탕체를 써라. 라는 코드의 결과인데, 

결과를 보면 내 컴퓨터에는 궁서체가 없는 듯하다. 그래서 바탕체로 표시되었다.

 

28. 폰트 타입 Font Types

  • serif: 돌기가 있는 형태, 명조
  • Sans-serif: 돌기가 없는 형태, 고딕
    • sans가 프랑스어로 without의 의미
    • 줄여서 sans라고도 함.
  • monospace: 너비 일정, 코딩에 적합
    • mono는 '하나'라는 의미
  • script: 필기체
  • fantasy: 디자인 글꼴

-Fantasy font

 

 

29. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body { font-family: 굴림, sans-serif}
    </style>
</head>
<body>
    <p>안녕하세요111!</p>
    <p>Hello, world111!</p>
    <p style="font-family: 궁서, 바탕;">안녕하세요222!</p>
    <p style="font-family: Tahoma, Verdana">Hello, world222!</p>
</body>
</html>

라는 코드에서

body { font-family: 굴림, sans-serif}

이 라인을 보면

 

굴림체가 없으면 sans-serif 라는 폰트의 종류를 사용해라

라는 의미이다.

 

그렇다면 sans-serif 종류 중에 어떤 폰트가 사용될까?

이것이 나와있는 곳이 웹브라우저의 설정이다. 

 

내가 쓰는 크롬에서 확인해보자.

 

크롬 설정 > 모양 > 글꼴 맞춤 설정 >

[표준 글꼴] 은 아무 폰트도 지정이 안 되어있을 때 어떤 폰트부터 적용이 될 것인지에 관한 것. -> Apple SD 산돌고딕 neo

[Serif], [Sans-serif] 글꼴도 나와있다.

 

즉 Sans-serif 글꼴 중에서 Apple SD 산돌고딕 neo가 적용되는 것이다.

 

 

30. 무료 웹 폰트 사이트

 

웹 폰트 : 폰트가 웹에 있어서 내가 직접 폰트를 배포하지 않아도 웹 상에 있는 폰트의 링크만 가지고 html을 만들어주면 자동으로 그 폰트를 가져다가 보여줌. 

 

 

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

구글 폰트!!

- 전 세계의 무료 및 오픈소스 폰트들을 모아 서비스 하는 곳.

- 다운로드 및 웹 링크가 가능함.

 

 

31. Google Fonts 이용방법(링크)

 

Noto Sans Korean

를 사용해보겠다.

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">

    <style>
        body{font-family: 'Noto Sans KR', sans-serif;}
    </style>
</head>
<body>
    <h1>Hi</h1>
</body>
</html>

 

링크 세 줄을 복사해서 <head>안에 넣어주고

<head> 안에 <style>에 CSS rules to specify families  안에 들어있는 것들을 넣어준다.

 

 

32. Google Fonts 이용방법(@import)

 

@import 는 다른 스타일 시트에서 스타일 규칙을 가져오는 데 사용.

 

@import 라인은 '구글에서 제공하는 폰트에 대한 css를 가져와라.' 라는 의미.

 

그리고 body에 font-family 적용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

        body {font-family: 'Noto Sans KR', sans-serif;}
    </style>
</head>
<body>
    <p>안녕하세요!</p>
    <p>Hello, world!</p>
</body>
</html>

 

**link와 @import 방식의 차이

<link>라는 태그 자체가 html 파일에 있어야 함.

페이지가 열페이지라면 그 모든 페이지에 링크를 다 걸어줘야 함.

 

하지만 별도의 css 파일을 사용하면 이렇게 @import 를 걸어줄 수 있음.

모든 페이지에서 링크를 걸어주지 않아도 css 파일에서 @import를 걸어주면 됨.

 

  • 이 페이지 하나에만 특수하게 폰트를 가져다가 쓸거야: <link> 추천
  • 사이트 전체적으로 특정한 포트를 가져와서 쓸거야: @import 추천

 

 

33. 언어별로 다른 폰트를 이용하는 방법

한글 폰트들은 기본적으로 영어 폰트도 지원함.

하지만 한글 폰트에서 제공하는 영어 폰트가 외국인들이 보기에는 안 좋을 수도 있음.

 

그래서 한글은 한글 폰트를 사용하고 영어는 다른 폰트를 사용해보자!

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body { font-family: Verdana,굴림, sans-serif;}
        *:lang(ko) {font-family: 궁서, sans-serif;}
    </style>
</head>
<body>
    <p lang="ko">안녕하세요!</p>
    <p>Hello, world!</p>
</body>
</html>

이 전체 코드에서

 

body { font-family: Verdana,굴림, sans-serif;}

이 라인이 의미하는 바를 알아보자.

Verdana는 한글 폰트를 지원하지 않는 영어 폰트다.

따라서 자연스럽게 한글이 표시될 때에는 Verdana가 아닌 굴림으로 표시된다.

 

이런 식으로 한글 폰트를 font-family에서 영어 폰트보다 뒤에 위치시키는 것이 좋다.

한글 폰트가 영어 폰트 앞에 위치하면 영어까지 다 커버해버리기 때문이다. 외국인들이 보기에 한글폰트가 지원하는 영어는 썩 별로일 수 있다.

 

 

그런데 좀 더 명시적으로 '이 부분은 한글이니까 무조건 이 폰트를 이용해!' 라며 폰트를 지정해줄 수도 있다.

<p lang="ko">안녕하세요!</p>

이 라인은 element가 모두 한글이라고 lang 속성에서 지정해준 것이다.

 

*:lang(ko) {font-family: 궁서, sans-serif;}

이 라인은 모든 태그에 대해서 lang(ko)로 지정되어 있으면 font-family로 궁서를 먼저 적용하라는 의미.

 

 

34. Roboto mono 폰트를 회원가입창에 적용해보기.

** 팁

google font에서 selected families가 안 뜰 때!!

저기 오른쪽 위에 네모친 저 부분을 눌러주면 된다.

그러면 이렇게 짠 나온다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
        html{font-size: 16;}
        table{border: 1px solid; width: 600px; height: 550px;}
        tr{
            line-height: 1em;
        }
        th {
            font-size:1.5em;
            color:skyblue;
        }

        label
        {
            font-size: 1em;
            font-weight: bold;
        }
        body {font-family: 'Roboto Mono', monospace;}
        
    </style>
</head>
<body>
    <form action="abc.html">
        <table>
            <tr>
                <th colspan="2">Please input your information</th>
            </tr>

            <tr>
                <td><label for="FirstName">First Name</label></td>
                <td><input type="text" name="FirstName"></td>
            </tr>

            <tr>
                <td><label for="LastName">Last Name</label></td>
                
                <td><input type="text" name="LastName"></td>
            </tr>

            <tr>
                <td><label for="Email">Email</label></td>
                <td><input type="text" name="Email" size="30"> <input type="button" name="EmailConfirm" value="Email Confirm"></td>
                
            </tr>
            
            <tr>
                <td><label for="Password">Password</label></td>
                
                <td><input type="password" name="Password" size="15"></td>
            </tr>

            <tr>
                <td><label for="PasswordConfirm">Password Confirm</label></td>
                
                <td><input type="password" name="PasswordConfirm" size="15"></td>
            </tr>

            <tr>
                <td><label for = "Region">Region</label></td>
                
                <td>
                    <select name="Region" size="3">
                        <option value="APAC">APAC</option>
                        <option value="America">America</option>
                        <option value="EMEA">EMEA</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td rowspan="2"><label for = "Membership">Membership</label></td>
                
                <td>
                    <input type="radio" name="Membership" value="free" id="Free" checked>
                    <label for = "Free">Free</label>
                    <input type="radio" name="Membership" value="basic" id="Basic">
                    <label for = "Basic">Basic</label>
                    <input type="radio" name="Membership" value="premium" id="Premium">
                    <label for = "Premium">Premium</label>
                </td>
            </tr>

            <tr>
                <td><label for="StartDateTime">Start Date/Time:</label>
                <input type="date" name="StartDateTime">
                <input type="time" name="StartDateTime"></td>
            </tr>

            <tr>
                <td><label for= "age">Age</label></td>
                <td><input type="number" min="1" max="99"></td>
            </tr>

            <tr>
                <td><label for ="FavoriteColor">Favorite Color</label></td>
                <td><input type="color" name="Favorite Color?"></td>
            </tr>

            <tr>
                <td><label for ="EmailNewsletter">Email Newsletter</label></td>
                <td>
                    <input type="checkbox" name="EmailNews">
                    <label for = "EmailNews">Yes I will receive email newsletter</label>
                </td>
            </tr>
            <tr><td></td></tr>
            <tr>
                <td><input type="submit" value="Submit"></td>
            </tr>
        </table>
        
    </form>
</body>
</html>

display 속성과 div에 대해 알아보자.

 

35. display 속성

 

  • block: 가로 전체를 차지하는 블록 형태

ex) <h1>~<h6>, <p></p>

 

  • inline: 다른 요소와 함께 가로로 표시 가능

ex) <img>, <a></a>

 

  • none: 존재는 하지만 화면에 표시 안 함.

** border: 크기 타입 색상

ex) border: 3px solid blue

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {border: 1px solid;}
    </style>
</head>
<body>
    <p>Display CSS Property</p>
    <p>
        <a href="https://www.google.com">Google</a>
        <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="100px">
        <img style="display: block;" src="https://upload.wikimedia.org/wikipedia/commons/0/0d/Facebook_logo_%28June_30%2C_2015%29.png" width="100px">
    </p>
    <p style="display:block;">123</p>
</body>
</html>

 

같은 paragraph에서 facebook 이미지만 다른 줄에 있는 이유는

style="display: block;"

속성 때문이다.

이 속성 덕에 원래는 인라인이지만 블록이 되어 다른 것과 공존하지 않고 줄바꿈이 되어 내려간 것.

 

123은 존재는 하지만 display 속성이 none이기 때문에 안 보인다.

 

 

36. ul로 가로 메뉴 만들기

- <li></li>는 기본적으로 block의 형태를 가지고 있음.(세로 나열)

근데 이것을 inline으로 바꾸면서 가로로 공존할 수 있게 만들 수 있음.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul { 
            list-style-type: none; 
            background-color: lightcyan;}

        li {
            display: inline;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Products</li>
    <li>Log In</li>
    </ul>
</body>
</html>

 

list-style-type을 none으로 해줌으로써

  •  

이렇게 생긴 글머리 기호를 없애줬다.

 

 

37. display: inline-block

inline은 기본적으로 어떤 내용을 표시하는 것이기 때문에 width나 height를 지정하지 못하도록 되어있음.

그런데 36과 같이 메뉴를 인라인으로 만들었는데 각각의 메뉴의 width를 지정하고 싶다면 

inline의 속성을 가지면서도 약간의 block의 특성을 가져와서 그 블록의 width나 height를 지정할 수 있도록 한 것이 inline-block.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {list-style-type: none; background-color: lightcyan;}

        li {
            display: inline-block;
            width: 100px;
            padding: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Products</li>
        <li>Log In</li>
    </ul>
</body>
</html>

 

 

 

38. 구역 division

 

-하나 또는 여러 개의 하위 요소를 포함해 위치나 스타일 등을 지정하는 데 이용.

- <div> 태그로 나눴다고 해서 화면에 보이지는 않음.

하지만 눈에 보이지 않는 영역을 잡아주는데 사용됨.

- 하나의 div안에 여러개의 element들이 들어갈 수 있음.

<!-------- 구역 division /div ------>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {border: 1px solid; padding: 10px;}
    </style>
</head>
<body>
    <div><p>Div 1</p>
        <div><p>Div 2</p>
            <div><p>Div 3</p>
            </div>
        </div>
    </div>
</body>
</html>

 

 

39. div ul menu

 

**많은 사이트에서 메뉴를 nav라고 함.

메뉴를 영어로 navigation bar라고 하기 때문.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {text-align: center;}
        .nav ul {list-style-type: none;
                background-color: lightcyan;}
        .nav li {display: inline-block;
                width:100px;
                padding: 10px;
                font-weight: bold;}
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>Home</li>
            <li>About Us</li>
            <li>Products</li>
            <li>Log in</li>
        </ul>
    </div>
</body>
</html>

nav 클래스로 지정된 모든 태그에서 텍스트들이 가운데 정렬됨.

 

 

 

 

40. 하위 선택자

39번의 코드 안에 하위 선택자가 포함되어있다.

 

하위 선택자: id, class명 안에 있는 특정 요소 및 class명을 지정해 스타일을 줄 수 있음.

ex)

.nav ul {~} -> .nav 안에 있는 ul에게 {~} 스타일을 지정하겠다. (꼭 띄어쓰기 해야 함)

 

 

41.  <div>와 <a>만 이용한 왼쪽 메뉴 만들기.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {width: 100px; background-color: lightgray;}
        a {color: purple; display: block; padding-top: 10px; padding-bottom: 10px;text-align: center;font-weight: bold;}
    </style>
</head>
<body>
    <div>
        <a href="https://www.google.com/">Google</a>
        <a href="https://www.youtube.com/">Youtube</a>
        <a href="https://www.facebook.com/">Facebook</a>
        <a href="https://www.instagram.com/">Instagram</a>
        <a href="https://www.amazon.com/">Amazon</a>
    </div>
</body>
</html>

float 속성에 대해 알아보자.

 

42. 요소들의 가로 배치

- 그림과 글이 가로로 배치되게 하거나, block 요소인 <div>들을 가로로 배치하는 경우

 

 

43. float 속성

요소를 공중에 띄워(float) 정렬함.

 

  • none: 기본값
  • left: 띄워서 왼쪽으로 보냄
  • right: 띄워서 오른쪽으로 보냄

 

요소를 float로 공중에 띄우면?

1. 부모는 공중에 띄운 자식 요소의 너비, 높이를 없는 것으로 간주하고 재계산

2. 하지만 형제 중에 img나 텍스트 등의 inline 요소들은 띄워진 영역을 인식하고 피해다니게 됨.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {border: 1px solid;}
        img {float:left;}
    </style>
</head>
<body>
    <div>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="100px">
    1st Line<br>
    2nd Line
    </div>
</body>
</html>

img는 띄워서 왼쪽으로 보내라.

텍스트들은 이미지의 위치는 기억하고 있다가 이미지를 피해서 위치함.

 

44. float 속성 사용 후 처리 방법(1)

 

float가 된 요소의 부모가 독립된 자식의 높이를 인식하지 못함.

부모의 높이가 변함에 따라 다른 자식 요소들을 위치가 변동되는 문제 발생

 

=> 따라서 float 속성을 사용한 뒤에는 반드시 뒤에 따라오는 요소들이 표시가 되도록 후 처리가 필요함.

 

*문제 상황

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{border: 1px solid;}
        img {float: left;}
    </style>
</head>
<body>
    <div>
        <img src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="200px">
        1st Line <br>
        2nd Line
    </div>
    <div>
        Next Div!
    </div>
</body>
</html>

원래 있었던 부모가 이미지가 떠서 자연스럽게 텍스트랑 배치는 하게 되었지만 그 원래 이미지까지 포함한 크기가 있었는데 그게 없어져버린 셈이 되어 나머지 텍스트 크기만큼 줄어듦.

 

따라서 원하지 않게 Next Div까지 이미지 옆에 와버린 셈.

 

**해결 방법 : 부모 요소에서 overflow:auto로 복원

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{border: 1px solid;}
        img {float: left;}
    </style>
</head>
<body>
    <div style="overflow:auto;">
        <img src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="200px">
        1st Line <br>
        2nd Line
    </div>
    <div>
        Next Div!
    </div>
</body>
</html>

이것으로 해결하기 위해 부모(<div>) 입장에서 overflow가 있으면 다시 계산해서 표시해라,

부모 입장에서 재계산을 하며, float가 일어났지만 내 최종적인 크기는 이것이 되어야해. 라며 재계산 하는 것.

그렇기때문에 부모의 크기가 제대로 잡혀지고, next div라는 뒤에 따라오는 요소가 제대로 표시됨.

 

요로케.

 

약간 뭐랼까.

overflow:auto를 해줌으로써 악습을 끊어낸 느낌? (선배가)

 

 

45. float 속성 사용 후 처리 방법(2) - 다음 요소에서 clear:both 로 복원

 

44번에서 overflow:auto는 선배가 후배를 위해 악습을 끊어내는 느낌이었다면

이번에는 clear:both를 사용하여 후배가 직접 악습을 끊어낸다.

 

- 다음 요소에서 clear:both 로 복원

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {border:1px solid;}
        img {float: left;}
    </style>
</head>
<body>
    <div>
        <img src= "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="200px">
        1st Line <br>
        2nd Line
    </div>
    <div style="clear:both;">Next DIV!</div>
</body>
</html>

오른쪽 왼쪽 신경쓰지 말고 아래로 가는데 정렬은 왼쪽.

=> clear:both

근데 선배는 내팽겨쳐두고 후배가 자기만 쏙 홀라당 빠져나간 것이기 때문에 선배꼴은 말이 아니다.

 

이런 상황에서는 overflow:auto가 더 좋을 듯 하다.

 

 

46. float 속성 사용 후 처리 방법(3) - 부모 요소에서 ::after 가상 요소 이용

 

44,45번 방법보다 훨씬 더 많이 쓰이고 세련된 방법이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {border: 1px solid;}
        img {float: left;}
        .clearfix::after {
            content: "";
            clear:both;
            display:table;}
    </style>
</head>
<body>
    <div class="clearfix">
        <img src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="200px">
        1st Line<br>2nd Line
    </div>
    <div>Next DIV</div>
</body>
</html>

코드를 뜯어보자.

.clearfix::after {
    content: "";
    clear:both;
    display:table;}

우리가 만든 class에 대해서 스타일을 적용하는 부분.

clearfix는 사람들이 보통 이런 경우에 사용하는 클래스 이름. 다른 것으로 설정해도 무방.

 

::after는 영어로 pseudo element(가상 요소)라고 함.

내가 위치하는 요소 바로 직전/직후에 가상의 요소를 지정하고 스타일을 주는 것.

 

clearfix 라고 클래스가 되어있으면 그 요소가 바로 끝나자마자 어떤 스타일을 강제로 집어넣어주는 것.

 

부모(여기서는 <div>)가 clearfix라는 클래스를 가지게 되면 그 부모가 끝나자마자 clear 작업을 할 수 있음.

 

overflow:auto와는 다르게 여러개의 div에 한꺼번에 clear 작업을 할 수 있도록 도와줄 수 있음.

 

clearfix 코드는 그냥 복사해서 쓸 수 있음. (이 똑같은 코드가 유용하게 쓰인다는 의미.)

 

 

47. 가로로 floating되는 div

 

 

div에 클래스를 걸어줌으로써 하위 세개의 <div>도 floating이 되게 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-parent div {width: 100px; height: 100px;
                        float: left; border: 1px solid;}
        .clearfix::after {
                        content:"";
                        clear: both;
                        display: table;}
    </style>
</head>
<body >
    <div class="div-parent clearfix">
        <div>Div 1</div>
        <div>Div 2</div>
        <div>Div 3</div>
    </div>
</body>
</html>

 

 

48. 가로로 이미지가 들어있는 박스들이 배치되도록 만들기

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .album div {float: left; border:5px solid;margin: 10px; color: brown; text-align: center;}
        .clearfix::after {content: "";
                            clear:both;
                            display:table;}
        p{font-size: 1.5em; color: black;}
    </style>
</head>
<body>
    <div class="album clearfix">
        <div><img src="https://pixahive.com/wp-content/uploads/2020/09/Floating-Men-70739-pixahive.jpg" width="100px"><p>Image 1</p></div>
        <div><img src="https://pixahive.com/wp-content/uploads/2020/09/Floating-Men-70739-pixahive.jpg" width="100px"><p>Image 2</p></div>
        <div><img src="https://pixahive.com/wp-content/uploads/2020/09/Floating-Men-70739-pixahive.jpg" width="100px"><p>Image 3</p></div>
    </div>
</body>
</html>

 

position에 대해 배워보자.

 

49. position 속성

 

  • static: 기본
  • relative: 상대 위치 방식(부모 요소 기준)
  • absolute : 절대 위치 방식(조상 혹은 문서 기준)
  • fixed: 절대 위치로 화면에 고정(스크롤 포함)
  • sticky:스크롤에 따라 relative와 fix로 전환

 

50. Position: relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: relative;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div style="left: 50px; top:20px">Div 1
        <div style="left: 50px; top:10px;">Div 1-1
        </div>
    </div>
</body>
</html>

본래 위치 기준

 

 

저 relative 코드만 없었으면 div 1-1이 원래 있었을 자리에서 left 50 top 10을 가라는 얘기다.

 

 

51. position: absolute

 

부모나 조상 중에 stativ이 아닌 position이 지정되었을 때, 만약 부모와 조상이 모두 static이라면 문서 기준

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div { position:absolute;
        border:1px solid;}
    </style>
</head>
<body>
    <div style="left:50px; top:20px; width:200px; height:100px;">
    Div 1
        <div style="left:50px; top:20px;">
        Div 1-1
        </div>
        <div style="left:80px; top:50px;">
            Div 1-2
        </div>
    </div>
</body>
</html>

Div 1 내의 자식 요소들을 한꺼번에 끌고 다닐 수 있음.

div 1-1은 div1 기준 왼쪽으로부터 50, 위로부터 20을 간 셈이다.

 

 

52. position: fixed

문서 기준

- 화면 크기가 변하거나 스크롤 되어도 위치 고수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {border:1px solid;}
        #banner {
            position: fixed;
            bottom: 20px;
            right:20px;
            width:150px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="banner">
        Banner Image
    </div>
    <textarea cols="30" rows="100"></textarea>
</body>
</html>

스크롤을 주기 위해 일부러 textarea의 row를 길게 줬다.

 

스크롤을 내려도

position:fixed로 설정된 배너 이미지는 유지된다.

 

 

53. position: sticky

본래 위치 기준

-기본 relative로 지정됨. 스크롤 시에는 지정된 위치에 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menu {position: sticky;
            position:-webkit-sticky;
            background-color: lightcyan;
            top:20px;}
        
        .menu li {display: inline-block; margin: 10px;}
    </style>
</head>
<body>
    <ul class="menu">
        <li>Home</li>
        <li>Product</li>
        <li>Store</li>
    </ul>
    <textarea cols="30" rows="100"></textarea>
</body>
</html>

스크롤을 내리면

 

position:-webkit-sticky;

 

를 넣어줘야 safari 브라우저에서도 호환이 된다.

 

 

54. 화면 정중앙에 로그인폼 완성하기

 

 

 

 

이걸 만들어야 하는데

 

이게 나의 최선이었다.

 

 

그래서 해답을 보고 배워보자.

<!DOCTYPE html>
<html lang="en"><head>
    <title>Log-in</title>
    <style>
        .login {
            width: 300px;
            height: 170px;
            
            position : absolute;
            top : 50%;
            left : 50%;
            margin-top: -85px;            
            margin-left: -150px;

            border: 1px solid;                        
            text-align: center;
        }

        .login label {
            display: inline-block;
            width: 100px;
        }
        
        .login div {            
            margin-left: auto;
            margin-right: auto;
            margin-top : 10px;
            margin-bottom : 10px;
        }
    </style>
</head>
<body>
    <div class="login">                
        <div><h3>Member Log-in</h3></div>
        <div>
            <label for="txtId">Login Id:</label>
            <input type="text" name="txtId" size="12">
        </div>
        <div>
            <label for="txtPwd">Login Pwd:</label>
            <input type="password" name="txtPwd" size="12">
        </div>
        <div>
            <input type="button" value="Log-In">
        </div>
    </div>        
</body>
</html>

label의 width를 맞추고 인라인 블록으로 만들어서 저 텍스트박스의 라인이 일치하도록 만든 거 같다.

난 그것도 모르고 저걸 테이블로 만드느라 쌩쇼를 했다....

 

@@html에서 <style> 태그는 어디에 놓는 것이 좋을까?

<head>,<body> ??

 

그래서 챗gpt에 물어봤다.

 

<style> 태그는 HTML 문서의 <head> 섹션에 위치하는 것이 일반적입니다. <head> 섹션은 문서의 메타데이터를 정의하는 데 사용되며, 이는 검색 엔진 최적화(SEO)에 중요합니다. 따라서 스타일 시트도 <head> 섹션에 포함되는 것이 좋습니다. 그러나 <style> 태그는 <body> 요소 내부에 포함될 수도 있습니다. 이 경우 스타일 시트는 해당 요소에만 적용됩니다. 예를 들어, 특정 섹션에만 스타일을 적용하려는 경우 <style> 태그를 <body> 태그 내부에 배치할 수 있습니다. 그러나 일반적으로 <style> 태그를 <head> 섹션에 배치하는 것이 더 일반적이며, 모든 스타일 시트를 한곳에 모아 유지하기에도 편리합니다.

 

  • 요약: <style> 태그는 <head>에 써라

 

저작자표시

'Front-End > HTML_CSS' 카테고리의 다른 글

[CSS] position: fixed일 때 상하스크롤이 안되는 문제 해결  (0) 2023.06.12
[HTML/CSS] 220318 학습일기  (0) 2023.03.19
[HTML/CSS] 230316 학습일기  (0) 2023.03.17
[HTML/CSS]220314 학습일기  (0) 2023.03.15
[HTML/CSS] 220313 학습일기  (0) 2023.03.14

'Front-End/HTML_CSS' Related Articles

티스토리툴바