내배캠 본캠프

내일배움캠프 - 12/10 TIL

장해진 2024. 12. 10. 20:43

디자인 카타

Android

웹 퍼블리싱 2일차-CSS

 

<!DOCTYPE html>
<!-- HTML5 문서임을 선언합니다. 웹 브라우저가 이 문서를 올바르게 해석하도록 도와줍니다. -->
<html>
<!-- HTML 문서의 최상위 태그입니다. 모든 HTML 코드는 이 태그 안에 작성됩니다. -->

<head>
    <!-- 웹 페이지에 대한 정보를 포함하는 부분입니다. 
         예: 제목, 메타데이터, 외부 리소스(CSS, JS) 등을 포함합니다. -->
    <title>나의 첫 번째 웹 페이지</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=Gowun+Batang&family=Jua&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: "Jua", sans-serif;
            font-weight: 200;
            font-style: normal;
            margin: 20px;
        }

        .box {
            background-color: skyblue;
        }

        .custom-button {
            display: inline-block;
            text-decoration: none;
            font-family: "Jua", sans-serif;
            background-color: indianred;
            color: white;
            padding: 8px 12px;
            border: none;
            font-size: 16px;
            cursor: pointer;
            border-radius: 10px;
            text-align: center;
        }

        .custom-button:hover {
            background-color: darkred;
            color: antiquewhite;
        }

        .special-link {
            color: orange;
            margin-left: 10px;
        }

        img {
            border-radius: 20px;
        }

        a {
            text-decoration: none;
            color: steelblue;
        }

        #unique-caption {
            color: gray;
            font-size: 12px;
            font-weight: 100;
        }
table{
width: 20%;
}
        th,td{
            padding: 4px;
            border: 1px solid black;
            text-align: center;
        }
        #unique-td1 {
            background-color: lightgoldenrodyellow;
        }

        #unique-td2 {
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <!-- 여기 밑으로 코드를 채워주세요! -->
    <a href="index.html">HOME</a>
    <a href="Portfolio.html" class="special-link">Portfolio</a>
    <h1>안녕하세요! 저는 장해진입니다 ☺️</h1>
    <p> 초보디자이너이지만, 열심히 피그마와 웹퍼블리싱을 배우고 있어요!</p>
    <img src="me.jpeg" alt="프로필 사진" width="300">


    <h2>💕좋아하는 것</h2>
    <ul>
        <li><a href="detail.html">🐈고양이</a></li>
        <li><a href="detail2.html">🚗여행</a></li>
        <li><a href="detail3.html">🎥영화</a></li>
    </ul>
    <div id="unique-caption"> ⬆️ 해당 항목들을 클릭하여 구경하세요!</div>
    <h2>🐱우리집 고양이</h2>

    <img src="장군쪼만.jpeg" alt="장군쪼만 사진" width="300">

    <table border="1">
        <tr>
            <th>이름</th>
            <th>나이</th>
        </tr>
        <tr>
            <td class="box">장군이</td>
            <td id="unique-td1">11살</td>
        </tr>
        <tr>
            <td class="box">쪼만이</td>
            <td id="unique-td2">6살</td>
        </tr>
    </table>
    <h2>📮방명록을 작성해주세요!</h2>
    <form action="/submit" method="POST">
        <label for="title">한마디를 남겨주세요!:</label><br>
        <textarea id="title" name="title"></textarea><br>
        <a href="form.html" class="custom-button">편지보내기</a>
    </form>
</body>

</html>

 

click me -> 팝업

 

방명록 편지보내기를 누르면 이동하는 페이지도 만들었는데, 실제로 한마디를 남겼을 때는 어떻게 하는지 여쭤봐야겠다..!
hover 상태

 

클래스 선택자 : 요소를 한 번에 꾸밀 때 사용한다!
<style>
.box{
border: 2px solid blue;
}
</style>

<body>
<div class="box">첫 번째 박스</div>
</body>
아이디 선택자 : 특정 요소 하나를 꾸밀 때 사용
<style>
#unique-box{
background-color: pink;
}

<body>
<div id="unque-box">유일한 박스</div>

 

선택자의 우선순위

1. 인라인 스타일(body에서 직접 적용된 스타일)

2. 아이디 선택자 #id

3. 클래스, 속성 선택자, 가상 클래스(.class, [href], :hover)
[href]{color:red;} = href 속성이 있는 모든 요소가 레드!

[href="https://www.naver.com"]{color:blue;} = 네이버만 블루 

4. 태그 선택자, 가상 요소(div, p, : :before)
: :before는 HTMl 구조 변경하지 않고도, 선택한 요소 앞에 스타일이나 내용을 추가할 수 있는 CSS 가상 요소! 

 

부모자식 관계에서의 포지셔닝

  • 부모가 relative, 자식이 absolute인 경우 = 부모 기준으로 배치
  • 부모가 relative, 자식이 relative인 경우 = 자식 자신의 원래 위치를 기준으로 이동
  • 부모가 absolute, 자식이 absolutedl인 경우 = 부모 기준으로 배치

 

👍 잘한 점

  • 계속 응용하니까 재밌다! 모르는건 지피티한테 물어보면서 하는 중... 내일 display:flex, grid 배우는게 기대된다! 

😦 아쉬운 점 

  • 개인과제 디자인 디벨롭은 못했다..! 디자인을 더 어떻게 바꿔야할지 막막해서..안 하게 되는 것 같다

✅ 앞으로 해야할 것

  • 내일은 개발만 하지 말고, 컴포넌트 만들기라도 해야겠다..