ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [100DaysOfCode] 08강
      Front-end/100DaysOfCode 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>태그로 묶어 음수 마진값을 주었다.

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

      'Front-end > 100DaysOfCode' 카테고리의 다른 글

      [100DaysOfCode] 11강(1)  (0) 2022.07.25
      [100DaysOfCode] 09 - 10강 (Html, CSS 연습)  (0) 2022.07.25
      [100DaysOfCode] 07강  (0) 2022.07.20
      [100DaysOfCode] 06강  (0) 2022.07.19
      [100DaysOfCode] 05강  (0) 2022.07.19

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바