[100DaysOfCode] 08강

Front-end/100DaysOfCode

[100DaysOfCode] 08강

year.number 2022. 7. 22. 19:23

인라인 요소 -> 블록 요소

인라인 요소는 위아래 패딩이나 마진에 제한이 있다

- 마진은 위아래 적용X,

- 패딩은 위아래로 늘어난 부분이 공간을 차지X

* 비대체 인라인 요소(a태그, img태그)는 수직 마진값을 위아래로 적용할 수 있다

display: inline-block 으로 제한을 풀 수 있다

마진 콜랩싱(여백 겹침)

두 요소 사이에 여백이 있을 때 더 큰 여백이 항상 우세하다

여백 겹침은 (1) 인접 요소, (2) 수직 여백, (3) 블록 요소에서만 발생한다

한 박스 당 margin값이 32px이기 때문에 첫 번째 박스 32px + 두 번째 박스 32px = 64px가 되어야 할 것 같지만,

여백 겹침 현상 때문에 위아래로 32px만 margin값이 적용된다

[과제] 여태까지 배운 내용을 바탕으로 따라 만들어보기

내가 짠 코드- HTML

<!DOCTYPE html>
<html lang="en"> 

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="styles/shared.css">
        <link rel="stylesheet" href="styles/style.css">
    </head>

    <body>
        <img src="images/studying.jpeg" alt="studying in library">
        <div>
        <h1>Yeonsu's Daily Challenge</h1>
        <p id = "TodayChallenge">Learn about the basics of web development - specifically dive into HTML & CSS.</p>
        </div>            
        <p class = "link">Explore the <a href="challenges.html">challenge</a></p>
    </body>
</html>

내가 짠 코드- CSS

body {
    margin:80px;
    background-color: #FFEBEE;
}

h1 {
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    margin-top: 80px;
}


img {
    width: 200px;
    border-radius: 500px;
    border: 3px solid rgb(93, 93, 93);
    display: inline-block;
}

#TodayChallenge {
    text-align: center;
    font-size: 48px;
    color: rgb(42, 42, 42);
    font-weight: 800;
}


div {
    width: 700px;
    margin: 0 auto;
    margin-top: -100px;
    padding: 48px 80px;
    border:3px solid rgb(93, 93, 93);
    border-radius: 8px;
    background-color: #EFA5B0;
    box-shadow: 0 0 8px #969696;
}

.link {
    margin-top: 64px;
    font-size: 20px;
}

정석 코드- HTML

<!DOCTYPE html>
<html lang="en"> 

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="styles/shared.css">
        <link rel="stylesheet" href="styles/style.css">
    </head>

    <body>
        <main>
            <img src="images/studying.jpeg" alt="studying in library">
            <h1>Yeonsu's Daily Challenge</h1>
            <p id = "TodayChallenge">Learn about the basics of web development - specifically dive into HTML & CSS.
            </p> 
        </main>
        <footer>
            <p>Explore the <a href="challenges.html">challenge</a></p>
        </footer>          
    </body>
</html>

정석 코드- CSS

main {
    width: 800px;
    margin: 200px auto 72px auto;
    background-color: #efa5b0;
    padding: 24px;
    border: 5px solid rgb(44, 44, 44);
    border-radius: 8px;
    box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
}

body {
    margin:80px;
    background-color: #FFEBEE;
}

h1 {
    font-weight: bold;
    font-size: 24px;
    text-align: center;
}


img {
    width: 200px;
    border-radius: 500px;
    border: 5px solid rgb(44, 44, 44);
    margin-top: -129px;
}

#TodayChallenge {
    text-align: center;
    font-size: 48px;
    color: rgb(42, 42, 42);
    font-weight: 800;
}

p {
    font-size: 24px;
}

[차이점]

1. HTML 구조를 짤 때 <header>, <main>, <footer> 와 같이 영역을 구분해야 했다. (권장사항)

2. css 이미지를 가운데로 옮기기 위해 나는 이미지 위치를 고정시킨 상태에서 다른 요소들을 <div>태그로 묶어 음수 마진값을 주었다.

하지만 굳이 나누지 않고 이미지 태그에만 음수 마진값을 주어도 된다.