Visual Studio Code 실습문제 톺아보기

Notice

Recent Posts

Recent Comments

Link

인스타그램

« 2026/07 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

리제

Visual Studio Code 실습문제 톺아보기 본문

개발자 호소인/Front

Visual Studio Code 실습문제 톺아보기

리제🫧 2026. 6. 22. 11:57

<nav class="navbar"> <div class="logo">MyPortfolio</div>
<ul class="menu"> <li>홈</li>
</ul>
</nav>

<header class="hero"> <h1>안녕하세요, CSS를 배우는 중입니다</h1>
</header>
<section> <h2 class="section-title">프로필</h2>
<div class="profile-card"> <span class="badge">NEW</span><h3>최지원</h3>
</div>
</section>

① 왜 <header>, <section>, <nav> 태그를 쓰나요?

이것들은 '시맨틱 태그(Semantic Tags)'입니다. 브라우저에게 "이 부분은 메뉴야", "이 부분은 본문이야"라고 의미를 전달합니다.

단순히 <div>로만 도배하는 것보다 검색 엔진이 내 페이지를 더 잘 이해하게 도와줍니다.

② 왜 position: relative와 absolute를 쓰나요?

relative (상대적 위치): "나를 기준으로 자식을 배치하겠다"라는 선언입니다. .profile-card에 설정된 이유입니다.
absolute (절대적 위치): "가장 가까운 relative 부모를 기준으로 위치를 잡겠다"입니다. 덕분에 NEW 뱃지가 카드 밖으로 나가지 않고 정확히 카드 내부 우측 상단에 고정됩니다.

③ 왜 display: flex를 자주 쓰나요?

justify-content: 요소들을 가로로 어디에 둘지 정합니다 (중앙, 양 끝 등).
gap: 요소들 사이의 간격을 한 줄로 깔끔하게 처리합니다.
flex-wrap: 화면이 좁아지면 아래로 넘길지 말지 결정합니다.

<!DOCTYPE html>
<html lang="ko"> <head>
    <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 종합 실습 (문제)</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:wght@100..900&display=swap
" rel="stylesheet">

    <style>
        /* [전체 초기화] 모든 요소의 기본 마진/패딩을 0으로 없애고 크기 계산을 border 포함으로 통일합니다. */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* [본문 스타일] 전체 폰트 적용, 배경색 지정 및 상단 고정 메뉴를 고려해 위쪽 여백을 줍니다. */
        body {
            font-family: "Noto Sans KR", sans-serif;
            background: #f0f0f0;
            color: black;
            padding-top: 55px;
            line-height: 1.6;
        }

        /* [리스트 초기화] ul, ol 태그의 기본 불렛 포인트(점)를 제거합니다. */
        ul, ol {
            list-style: none;
        }

        /* [네비게이션 바] 화면 상단에 고정하며, Flexbox를 사용하여 요소들을 양옆으로 배치합니다. */
        .navbar {
            position: fixed; /* 스크롤해도 화면 상단에 고정됩니다. */
            top: 0;
            left: 0;
            width: 100%;
            height: 55px;
            background: #2c3e50;
            border-bottom: 3px solid white;
            display: flex; /* 자식 요소들을 가로로 나열합니다. */
            justify-content: space-between; /* 로고와 메뉴 사이를 최대한 벌립니다. */
            padding: 0 24px;
            align-items: center; /* 세로 중앙 정렬을 합니다. */
            color: white;
        }

        /* [메뉴 목록] 메뉴 항목들을 가로로 배치하고 gap으로 간격을 줍니다. */
        .menu {
            display: flex;
            gap: 20px;
        }

        /* [메뉴 아이템] 마우스 커서를 올렸을 때의 변화(transition)를 설정합니다. */
        .menu li {
            cursor: pointer;
            transition: all 0.1s ease;
        }

        /* [메뉴 Hover] 마우스가 올라가면 살짝 작아지고 글씨가 굵어집니다. */
        .menu li:hover {
            scale: calc(0.98);
            font-weight: 600;
        }

        /* [배너] 페이지 상단 제목과 부제목을 중앙 정렬합니다. */
        .hero {
            text-align: center;
            color: white;
            background: #4a90d9;
            padding: 55px 0;
        }

        .hero h1 {
            font-size: 30px;
            margin-bottom: 10px;
        }

        /* [섹션 타이틀] 각 구역의 제목을 중앙에 배치하고 여백을 줍니다. */
        .section-title {
            text-align: center;
            margin: 30px 0;
        }

        /* [프로필 카드] 박스 모델로 카드를 만들고, 자식 요소 배치를 위해 position을 relative로 설정합니다. */
        .profile-card {
            width: 300px;
            background: white;
            margin: 0 auto; /* 좌우 마진 자동 적용으로 중앙 정렬 */
            padding: 24px;
            border: 1px solid #e4e4e4;
            border-radius: 8px;
            position: relative; /* 자식의 absolute 위치 배치의 기준점(기준점 생성) */
        }

        /* [뱃지] 부모 카드 내 우측 상단에 절대 위치로 배치합니다. */
        .badge {
            position: absolute; /* 부모(profile-card)를 기준으로 위치 */
            right: 10px;
            top: 10px;
            background: #e74c3c;
            color: white;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 4px;
        }

        /* [기술 스택 컨테이너] Flexbox를 이용해 카드를 가로로 나열하고 줄바꿈(wrap)을 허용합니다. */
        .cards {
            display: flex;
            justify-content: center;
            flex-wrap: wrap; /* 화면이 좁아지면 다음 줄로 넘어갑니다. */
            gap: 20px;
        }

        /* [카드 스타일] 각 카드의 크기와 테두리, 그림자(box-shadow)를 지정합니다. */
        .card {
            width: 240px;
            padding: 24px;
            background: white;
            border: 1px solid #e4e4e4;
            border-radius: 8px;
            box-shadow: 0 2px 4px #e4e4e4;
        }

        /* [선택자 연습 - 후손 선택자] .relation 내부의 모든 p 태그 적용 */
        .relation p {
            color: purple;
        }

        /* [선택자 연습 - 자식 선택자] .relation 바로 아래의 span 태그만 적용 */
        .relation > span {
            color: orange;
            font-weight: bold;
        }

        /* [선택자 연습 - ID 선택자] 특정 ID를 가진 요소만 적용 */
        #special {
            background: #fff3cd;
            padding: 12px;
        }

        /* [미디어 쿼리 - 반응형] 가로폭 768px 이하에서 레이아웃을 세로로 변경합니다. */
        @media (max-width: 768px) {
            .cards {
                flex-direction: column; /* 세로 정렬 */
                align-items: center;
            }
            .menu {
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">...</nav>
    <header class="hero">...</header>
    <section>프로필...</section>
    <section>기술 스택...</section>
    <section>선택자 연습...</section>
</body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'개발자 호소인 > Front' 카테고리의 다른 글

[JavaScript] 3. 형변환 (4)	2026.06.24
CSS 코드와 웹사이트의 구조 (0)	2026.06.24
[CSS] "소수는 어렵고 배수는 쉽다" 는 무슨 뜻일까? / Relation 이해하기 (0)	2026.06.22
[Web Front]웹 구조에 시각적 표현을 입히는 언어 CSS (0)	2026.06.22
[Web Front 2] HTML 기초 (0)	2026.06.18

'개발자 호소인/Front' Related Articles

리제

Visual Studio Code 실습문제 톺아보기 본문

Visual Studio Code 실습문제 톺아보기

① 왜 <header>, <section>, <nav> 태그를 쓰나요?

② 왜 position: relative와 absolute를 쓰나요?

③ 왜 display: flex를 자주 쓰나요?

'개발자 호소인 > Front' 카테고리의 다른 글

티스토리툴바