↑

마음에 드는 웹 사이트 찾고 의견 및 분석

APPLE

사이트 분석

1. 정보 구조 매장이자 잡지 애플 홈페이지는 사실상 쇼핑몰인데도 가격이나 "구매" 버튼을 전면에 내세우지 않아요. 각 제품마다 큰 이미지 + 짧은 카피("Now supercharged by M5") + [Learn more]와 [Buy] 두 개의 링크만 둡니다. 먼저 제품을 감상시키고, 사고 싶어지면 그때 사라는 순서예요. 상단 내비게이션(Mac, iPad, iPhone, Watch...)은 제품 카테고리로만 딱 나눠서 길을 잃지 않게 합니다.

2. 비주얼 여백과 이미지가 주인공 텍스트는 극도로 절제돼요. 문장이 짧고, 형용사 하나하나가 카피라이팅으로 다듬어져 있죠. 배경은 대부분 흰색/검정이고 제품 사진이 화면을 가득 채웁니다. "MacBook을 V자로 배치해 M5 칩 패밀리를 암시"하는 식으로 이미지 자체가 메시지를 전달해요.

3. 마케팅 설계 생태계로 끌어들이기 단순히 기기만 파는 게 아니에요. Apple Trade In(중고 보상), Apple Card(자체 신용카드), Apple TV·Music·Fitness+·Arcade 같은 구독 서비스가 홈에 같이 노출됩니다. 기기를 산 사람을 애플 생태계 안에 계속 머물게 하려는 의도가 페이지 구성에 그대로 드러나요.

의견

좋은 점 일관성이 정말 뛰어나다는 거예요. 20년 넘게 "미니멀 + 제품 중심" 원칙을 지켜서, 애플 페이지는 로고를 안 봐도 애플인 걸 알 수 있어요. 정보 위계도 명확해서 누구나 3초 안에 원하는 제품으로 갈 수 있고, 스크롤 인터랙션·이미지 최적화 같은 기술 완성도도 업계 최고 수준입니다.

아쉬운 점 이 절제된 스타일이 정보 탐색에는 불친절할 때가 있어요. 가격이나 상세 스펙을 보려면 반드시 한 단계 더 들어가야 하고, 여러 제품을 비교하기가 은근히 번거롭습니다. 또 첫 화면이 거의 신제품 광고판이라, "지금 뭐가 새로 나왔지"엔 강하지만 "내게 맞는 걸 고르고 싶다"는 사용자에겐 덜 배려적이에요.

한 줄 평가 애플 홈페이지는 웹사이트라기보다 브랜드 그 자체를 체험시키는 공간이에요. 판매 효율보다 브랜드 이미지를 우선한 전략적 선택이고, 그걸 이렇게 오래 완성도 있게 유지한다는 점이 가장 인상적입니다.

HTML, CSS 정리 내용

HTML — 웹의 뼈대

HTML(HyperText Markup Language)은 페이지의 구조와 내용을 담는 마크업 언어다. <여는 태그> 내용 </닫는 태그> 형태로 요소를 만들고, 태그에 속성(예: href, src)을 더해 세부 동작을 지정한다.

① 문서 기본 구조

모든 HTML 문서의 뼈대. head에는 화면에 안 보이는 정보(메타·제목·CSS 연결), body에는 실제 보이는 내용이 들어간다.


    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>탭에 뜨는 제목</title>
        <link rel="stylesheet" href="./css/main.css">
    </head>
    <body> 화면에 보이는 내용 </body>
    </html>

이 페이지 자체가 이 구조로 만들어져 있어요. head 안 내용은 화면에 안 보이고, body 안의 내용만 표시됩니다.

② 제목 · 문단

h1~h6는 제목(숫자가 작을수록 큼, 한 페이지에 h1은 하나 권장), p는 문단, br은 줄바꿈, hr은 가로 구분선.


    <h1>가장 큰 제목</h1>
    <p>문단입니다.<br>줄을 바꿉니다.</p>
    <hr>

가장 큰 제목

문단입니다.
줄을 바꿉니다.

③ 텍스트 강조

strong·b(굵게), em·i(기울임), mark(형광펜), sub·sup(아래·위 첨자), small(작게). strong·em은 "의미상 강조", b·i는 "단순 시각 표시"라는 차이가 있다.


    <strong>중요</strong> <em>강조</em> <mark>형광펜</mark>
    H<sub>2</sub>O, x<sup>2</sup>

중요 강조 형광펜
H₂O, x²

④ 목록

ul(순서 없는 ·), ol(순서 있는 1·2·3), 항목은 li. dl·dt·dd는 "용어–설명" 목록(이 정리처럼).


    <ul>
        <li>사과</li>
        <li>바나나</li>
    </ul>
    <dl>
        <dt>HTML</dt>
        <dd>웹의 뼈대</dd>
    </dl>

사과
바나나

첫째
둘째

⑤ 링크 · 이미지

a는 href 주소로 이동(같은 페이지 이동은 #id). img는 src로 경로, alt로 대체 텍스트(이미지가 안 뜰 때·접근성).


    <a href="https://apple.com">애플</a>
    <a href="#til">정리로 이동</a>
    <img src="./img/apple.svg" alt="애플 로고">

애플 정리로 이동

⑥ 표

table(표) 안에 tr(행), 그 안에 th(제목칸·굵게 가운데)·td(일반 칸). thead·tbody로 머리/몸통 구분.


    <table>
        <tr><th>이름</th><th>점수</th></tr>
        <tr><td>윤지</td><td>100</td></tr>
    </table>

이름	점수
윤지	100

⑦ 입력 폼

form은 입력 묶음, input은 입력칸(type으로 종류 지정), label은 입력칸 설명(for로 연결), button은 버튼.


    <form>
        <label for="id">아이디</label>
        <input type="text" id="id">
        <button>전송</button>
    </form>

⑧ 미디어

video·audio로 영상·소리 삽입(controls로 재생 버튼), iframe으로 외부 페이지(유튜브 등)를 창처럼 삽입.


    <video src="video.mp4" controls></video>
    <iframe src="https://youtube.com/..."></iframe>

영상(video)·소리(audio)·유튜브 같은 외부 페이지(iframe)가 이 자리에 삽입되어 재생돼요. (실제 파일·주소가 있어야 화면에 나타납니다)

⑨ 시맨틱 구조

의미를 가진 구획 태그. header(머리말)·nav(메뉴)·main(본문)·section(구획)·article(독립 글)·footer(꼬리말). div·span은 의미 없이 묶을 때만 사용(div=줄바꿈 블록, span=한 줄 안).


    <header>
        <nav>메뉴</nav>
    </header>
    <main>
        <section>
            <article>내용</article>
        </section>
    </main>
    <footer>
        © Yun:D
    </footer>

header (nav 메뉴)

main → section → article (본문 내용)

footer (꼬리말)

CSS — 꾸미기

CSS(Cascading Style Sheets)는 HTML 요소에 색·크기·배치·효과를 입히는 스타일 언어다. 선택자 { 속성: 값; } 형태로 "무엇을(선택자) 어떻게(속성·값) 꾸밀지" 적는다.

① 적용하는 3가지 방법

외부(link로 .css 연결) · 내부(head 안 style) · 인라인(태그 style 속성). 유지·보수가 쉬운 외부 방식을 주로 쓴다.


    <link rel="stylesheet" href="./css/main.css">  /* 외부(권장) */
    <style> p { color: red; } </style>             /* 내부 */
    <p style="color:red">글자</p>                  /* 인라인 */

이 글자는 빨간색으로 적용됩니다.

② 선택자

꾸밀 대상을 고르는 방법. 태그명, class는 점(.), id는 샵(#). class는 여러 개, id는 페이지에 하나만.


    p        { color: gray; }     /* 모든 p */
    .title   { font-size: 24px; } /* class="title" */
    #site    { padding: 20px; }   /* id="site" */

태그 선택자 p → 회색

.title → 24px 큰 글씨

③ 박스 모델

모든 요소는 네모 상자. 안쪽부터 content → padding(안 여백) → border(테두리) → margin(바깥 여백).


    .box {
        padding: 20px;          /* 안쪽 여백 */
        border: 2px solid navy; /* 두께 종류 색 */
        margin: 20px;           /* 바깥 여백 */
    }

여백·테두리 상자

④ 크기 · 색

width·height로 크기, color로 글자색, background로 배경색·이미지. 색은 이름·#hex·rgb()로 지정.


    .box { 
        width: 200px; height: 100px;
        color: white; background: hotpink;
    }

200 × 100

⑤ 배치 — flex

부모에 display:flex를 주면 자식들이 한 줄로 정렬. justify-content(가로 정렬)·align-items(세로 정렬)로 위치 조절.


    nav {
        display: flex; gap: 10px;
        justify-content: center;
    }

⑥ 배치 — Grid

display:grid는 2차원(행·열) 격자 배치. grid-template-columns로 열 개수·너비 지정.


    .list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;  /* 3열 */
    }

⑦ 위치 — position

static(기본)·relative(원래 자리 기준 이동)·absolute(부모 기준)·fixed(화면 고정). top·left 등으로 위치값.


    .up { position: fixed; right: 20px; bottom: 20px; }

오른쪽 아래 고정

(fixed는 화면 기준, 이 페이지의 ↑ 버튼처럼 스크롤해도 자리 유지)

⑧ 가상 클래스 · 가상 요소

:hover(마우스 올림)·:active 등 상태별 스타일이 가상 클래스. ::before·::after는 내용 앞뒤에 장식 요소를 추가.


    button:hover { background: skyblue; }
    .title::before { content: "★ "; }

마우스 올려보세요 별이 앞에 붙은 텍스트

⑨ 변형 · 전환 · 애니메이션

transform으로 회전·확대·이동, transition으로 변화를 부드럽게, @keyframes로 자동으로 반복되는 움직임.


    .card { transition: 0.3s; }
    .card:hover { transform: rotate(10deg) scale(1.1); }
    @keyframes spin { to { transform: rotate(360deg); } }

마우스 올려보세요

⑩ 꾸밈 효과

box-shadow(그림자)·border-radius(둥근 모서리)·opacity(투명도)·linear-gradient(그라디언트 배경).


    .card {
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,.2);
        background: linear-gradient(45deg, #f06, #48f);
    }

⑪ 반응형 — @media

화면 폭에 따라 다른 스타일 적용. 모바일·PC 화면을 하나의 코드로 대응한다.


    @media (max-width: 600px) {
        nav { flex-direction: column; }  /* 좁으면 세로로 */
    }

브라우저 창을 좁게(600px 이하) 줄이면 이 페이지의 배치·글자 크기가 바뀌는 것으로 직접 확인할 수 있어요.

⑫ CSS 변수 · 리셋

:root에 --변수를 정의하고 var()로 재사용하면 색·값을 한 곳에서 관리. CSS 리셋은 브라우저 기본 여백(margin 등)을 없애 스타일을 처음부터 통일한다.


    :root { --main: #ff0066; }
    button { background: var(--main); }
    * { margin: 0; padding: 0; box-sizing: border-box; } /* 리셋 */

--main 색이 적용된 요소

HTML, CSS 퀴즈

아래 정답 보기를 누르면 답이 펼쳐집니다.

Q1. (HTML) 다음 중 순서가 있는 목록을 만드는 태그는?

① <ul> ② <ol> ③ <li> ④ <dl>

정답 보기

② <ol> (ordered list). <ul>은 순서 없는 목록, <li>는 각 항목, <dl>은 용어–설명 목록.

Q2. (HTML) <a> 태그에서 이동할 주소를, <img> 태그에서 이미지 경로를 지정하는 속성은 각각 무엇일까?

정답 보기

<a>는 href, <img>는 src. 참고로 <img>의 alt은 이미지가 안 뜰 때 보여줄 대체 텍스트다.

Q3. (CSS) 박스 모델에서 바깥쪽 여백과 안쪽 여백을 지정하는 속성을 순서대로 쓰면?

정답 보기

바깥쪽 여백 = margin, 안쪽 여백 = padding. 테두리는 border. (안에서부터 content → padding → border → margin 순)

Q4. (CSS) 아래 빈칸에 들어갈 속성은? 마우스를 올렸을 때만 배경색을 바꾸려고 한다.


    button:______ {
        background: skyblue;
    }

정답 보기

hover → button:hover. :hover는 마우스를 올린 상태에만 적용되는 가상 클래스다.

Q5. (CSS) 자식 요소들을 가로로 나란히 정렬하려면 부모에 어떤 속성을 줘야 할까?

① display: block ② display: none ③ display: flex ④ position: fixed

정답 보기

③ display: flex. 부모에 flex를 주면 자식이 한 줄로 정렬되고, justify-content(가로)·align-items(세로)로 위치를 조절한다.