24.12.09_TIL

🗓️TODAY

• 디자인 타카
  iOS vs Android_해상도와 사이즈
• 새로운 팀
  1하자_1조
  
  
• 코딩 수업
  웹 퍼블리싱 실시간 강의

 

📌1하자_1조

 

이번에는 1조, 다섯명이다.

잘 부탁드려요🤗

 

 

📒웹 퍼블리싱 실시간 강의

HTML : 웹 페이지를 "구조화"하고, 브라우저에게 그 구조를 알려주는 역할
              ex) 제목, 문단, 이미지, 링크 등 배치를 구성

 

1.웹페이지의 뼈대를 만든다.

2.브라우저에게 지시하는 언어

3.콘텐츠를 구조화하는 것

 

 

1.제목 태그

<h1>~<h6>

<h1>이 가장 큰 제목, <h6>이 가장 작은 제목

 

<h1>큰 제목</h1>

<h3>조금 작은 제목</h3>

 

 

2.문단 태그

<p>

긴 글을 한 덩어리로 정리

 

<p>안녕하세요. 저는 HTML를 배우고 있어요.</p>

<p>웹 페이지를 만드는 건 정말 재미있어요.</p>

 

 

3.이미지 태그

<img>

사진이나 그림을 보여주는 태그.

<img>태그 안에 사진의 경로(주소)를 써야 화면에 보인다.

alt 속성은 사진이 업을때 대시 보여줄 설명

 

<img src="profile.webp" alt="프로필 사진" width="300">

 

*마우스 우클릭으로 이미지의 주소 복사

 

 

4.링크 태그

<a>

링크를 누르면 다른 페이지로 이동.

href 속성 안에 이동할 주소

 

<a href="주소">여기를 눌러 보세요!</a>

 

*detail 페이지 만들고 이동시키기

1.HTML 파일 두 개 만들기

• index.html이 있는 폴더 안에 detail.html이라는 파일을 만들기

2.페이지 이동을 위한 a 태그 만들기

• index.html
  <a href="detail.html">자세히 보기</a>
• detail.html
  <a href="index.html">처음으로 돌아가기</a>

 

 

5.리스트 태그

<ul>, <ol>, <li>

<ul>은 순서가 없는 항목

<ol>은 순서가 있는 항목

<li>은 목록의 항목

 

 

<h2>순서 없는 리스트</h2>

<ul>

        <li>사과</li>

        <li>바나나</li>

        <li>포도</li>

</ul>

 

<h2>순서 있는 리스트</h2>

<ol>

        <li>HTML 배우기</li>

        <li>CSS 배우기</li>

        <li>JavaScript 배우기</li>

</ol>

 

 

6.테이블 태그

<table>, < tr>, <td>, <th>

<table>은 테이블 전체

<tr>은 가로줄

<td>는 데이터 칸

<th>는 제목 칸

 

<table border="1">

      <tr>

             <th>이름</th>

             <th>나이</th>

      </tr>

      <tr>

             <td>철수</td>

             <td>10</td>

      </tr>

      <tr>

             <td>영희</td>

             <td>11</td>

      </tr>

</table>

 

 

7. 폼 태그

사용자가 정보를 입력하는 태그

<input>은 간단한 입력칸

<textarea>는 여러 줄을 입력할 때 사용

<button>은 버튼을 만들어요.

 

 

<form action="/submit" method="POST">

       <label for="name">이름:</label>

       <input type="text" id="name" name="name"><br>

       <label for="message">메시지:</label>

       <textarea id="message" name="message"></textarea><br>

       <button type="submit">제출</button>

</form>

 

*<br> 줄바꾸기 (엔터키)

 

8. 구역 나누기 태그

<div>

웹 페이지를 나누고 정리할 때 사용

CSS(디자인)와 함께 사용하면, 페이지를 더 깔끔하게 꾸밀 수 있다.

 

<div>

      <h2>내가 좋아하는 것들</h2>

      <p>사과, 바나나, 딸기</p>

</div>

 

---

 

개발자 도구

 

모든 브라우저에서

• Windows: F12 또는 Ctrl + Shift + I
• Mac: Cmd + Option + I
• 마우스 우측 클릭 > 검사

"Elements" 탭

 

 

디자이너가 자주 사용하는 개발자 도구 기능 단축키

• 요소 잡기 모드: ctrl + shift + c / cmd + shift + c

 

• 반응형 디바이스 모드: ctrl + shift + m / cmd + shift + m

 

---

1일차 개인과제

자기소개 상세 페이지 만들기

1. 자기 소개 중 “내가 좋아하는 것들” 리스트의 글자를 클릭했을 때 페이지가 이동되도록 해주세요.
2. 이동한 각각의 페이지에는 내가 좋아하는 것들에 대한 소개를 작성해주세요.
3. 각 페이지에는 최소 세 가지 이상의 태그가 들어가야 합니다.

 

 

🤔 오늘의 회고

오늘 코딩은 장미가족을 하던 때를 떠올리게 하는 강의였다.

(여기서 세대가 나뉘는건가.)

열심히 배너만들고 스킨 만들던 때가 있었는데...