📌
1. 디자이너의 코딩
2. 과제
1. 디자이너의 코딩
웹 개발은 사용자가 접하는 모든 웹사이트와 애플리케이션의 외형과 동작을 설계하고 구현하는 과정을 의미한다.
프론트엔드는 웹 개발의 사용자 인터페이스와 사용자 경험을 담당하며, 브라우저에서 실행되는 웹 기술 (HTML, CSS , JS)을 사용한다.
HTML
웹 페이지의 구조를 정의하는 마크업 언어.
컴퓨터에게 '이것을 보여줘'라고 말하는 언어.
브라우저는 HTML 코드를 해석하여 화면에 콘텐츠를 출력한다.
💡HTML5
HTML의 최신 버전. 2014년에 표준으로 확정되었다.
단순히 웹 페이지를 만드는 것을 넘어서, 웹 애플리케이션을 개발하고 모바일 환경에서 원활히 동작하며, 오디오, 그래픽, 동영상과 같은 풍부한 컨텐츠를 쉽게 추가할 수 있도록 도와준다.
테이블 태그
<table border="1">
<tr>
<th>이름</th> <!-- table head -->
<th>나이</th>
</tr>
<tr> <!-- table row -->
<td>철수</td> <!-- table data -->
<td>10</td>
</tr>
<tr>
<td>영희</td>
<td>11</td>
</tr>
</table>시멘트 태그
태그만 봐도 '이 안에 어떤 내용이 들어있을지' 알 수 있는 태그
ex. header, main, footer, article 등
개발자 모드
1.웹사이트가 어떻게 만들어졌는지 확인할 수 있다.
2. HTML 코드와 화면이 어떻게 연결되는지 배울 수 있다.
3. 실수나 문제를 쉽게 찾을 수 있다.
4. 웹사이트의 내용과 스타일을 임시로 바꿔볼 수 있어서 디자이너들도 디자인 개선 작업 혹은 디자인 검수 작업 시 자주 사용한다.
💡 개발자 도구 기능 단축키
1. 요소 잡기 모드
ctrl + shift + c
2. 반응형 디바이스 모드
ctrl + shift + m
2. 과제
1️⃣ 자기소개 상세 페이지 만들기
메인화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>나의 첫번째 페이지</title>
</head>
<body>
<section class="heroSection">
<div><img src="img3.jpg" alt="main" width="700px" height="500px" /></div>
<a href="detail.html">❤️내가 좋아하는 것들❤️</a>
</section>
<hr />
<section class="table">
<h3>인적사항</h3>
<table border="1">
<tr>
<th>이름</th>
<th>나이</th>
<th>현재 직업</th>
<th>희망 직업</th>
</tr>
<tr>
<td>박예지</td>
<td>27</td>
<td>백수</td>
<td>UXUI 디자이너</td>
</tr>
</table>
</section>
</body>
</html>❤️내가 좋아하는 것들❤️ 을 누르면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>❤️내가 좋아하는 것들❤️</title>
</head>
<body>
<h1>❤️내가 좋아하는 것들❤️</h1>
<a href="index.html">⬅️ 다시 돌아가기 ➡️</a>
<div>
<h2>심슨 가족</h2>
<img src="img4.jpg" alt="simpson" />
<p>
시즌 35까지 다 보고 잠깐 잊고 살다가 최근에 디즈니 플러스를 다시
가입했어요 <br />
제 밥친구에용 🍚
</p>
</div>
<hr />
<div>
<h2>마라샹궈</h2>
<img src="img5.jpg" alt="simpson" width="400px" height="400px" />
<p>
마라샹궈에 고수와 분모자를 꼭 넣어먹어요 <br />
하지만 먹고나면 다음날 힘들어서 자주는 안 먹으려고 해요
</p>
<h4>마라샹궈 필수 토핑</h4>
<ul>
<li>고수</li>
<li>분모자</li>
<li>청경채</li>
</ul>
</div>
<hr />
<div>
<h2>해리 스타일스</h2>
<img src="img6.jpg" alt="simpson" width="400px" height="400px" />
<p>
최근 <mark>해리 스타일스</mark>한테 입덕을 했지뭐에요<br />
사실 얼마 전까지만해도 해리스 스타일스인지 해리 스타일스인지 헷갈렸어요
</p>
<h4>예지의 최애곡🎵</h4>
<ol>
<li>Late night talking</li>
<li>daydreaming</li>
<li>falling</li>
</ol>
<span>꼭 들어보세요🎧</span>
</div>
</body>
</html>
상세 페이지로 이동
2️⃣ 카드 구조 만들기
<section class="navigation">
<h2>My site</h2>
<ul>
<li>홈</li>
<li>소개</li>
<li>서비스</li>
<li>문의</li>
</ul>
</section>3️⃣ 내비게이션 바 구조 만들기
<section class="card">
<img src="img7.jpg" alt="card" width="600px" height="400px" />
<h1>게시물 제목입니다</h1>
<span>2025년 3월 27일 16:44 디자인</span>
<p>
게시물 내용이 여기에 들어갑니다. 간단한 소개나 본문 일부를 보여줄 수
있어요.
</p>
</section>🎙️ 느낀점
사실 난 html, css, js를 좀 안다. (조금)
요즘 맨날 피그마만 보다가 vscode를 거의 4-5개월만에 켜보았다.
무튼. 오늘 강의를 통해 까먹고 있었던 부분들을 복습했다.
그리고 테이블 코드를 많이 사용하지 않아서 이 부분은 진짜 다 까먹고 있었기 때문에 TIL에 기록을 해봤다.
과제를 할 때 뭔가 꾸며야하나 생각했지만 내일 css를 배운다고 하니 추가하지 않겠다.
🧙♂️ 할 일
리액트 까먹지 않도록 다시 공부
