[UIUX디자인 TIL+44]-코딩배우기

프로젝트가 끝나고 MVP전에 간단한 코딩을 배웠다.

처음부터 말하자면,,ㅎㅎ 내가 할 수 없다...

내가 직접 한다기 보다는 나중에 실무에서 개발자들과 원활한 소통을 할 수 있고 내가 만들고자 하는 것이 어떻게 만들어지는지 알기위한 공부라고 생각했다.

 

📍HTML과 CSS

1. HTML

웹페이지의 뼈대 / 콘텐츠 구조를 정의하고 브라우저가 이를 해석하여 화면에 출력

->제목, 문단, 이미지, 링크 등 배치를 구성

주요역할-> 웹페이지의 뼈대를 만드는 것, 브라우저에게 지시하는 언어, 콘텐츠를 구조화하는 것

⇒ 이렇게 HTML은 웹 페이지를 "구조화"하고, 브라우저에게 그 구조를 알려주는 역할을 함

 

2. CSS

HTML로 만든 구조에 스타일/디자인을 입임

색상, 글꼴, 레이아웃등을 정의하여 웹페이지를 보기좋게 만듦

->디바이스 환경에 적응하는 반응형 디자인

---

 

<HTML문서의 기본 구조>

 

- HTML 태그는 웹페이지에서 글자, 그림, 표, 버튼같은것을 만들 떄 쓰는 특별한 명령어

- 항상 <> 로 감싸져 있고 페이지에 무엇을 넣을 지 알려주는 역할

- "시작태그" -> "내용" -> "종료 태그" 로 구성

 

- <h1> : 시작 태그, 큰 제목을 표시 ~ </h1> 종료태그로 끝냄

- 이미지 태그는 종료태그 없음

- <a> : 링크태그 / href="https://example.com": 링크로 이동할 주소를 설정.

- <p> : 문단 태그

- <strong> : 중요한 문장을 강조하는 태그

- 리스트 태그 : <ul>, <ol>, <li>

리스트는 할 일이나 여러가지 정보들을 깔끔하게 정리할 때 사용해요. 리스트(list) 자체가 정리된 목록이라는 뜻이에요. <ul>은 순서가 없는 목록, <ol>은 순서가 있는 목록이에요. <li>는 목록의 항목을 표시

 

- 테이블 태그: <table>, <tr>, <td>, <th>

테이블은 정보를 표로 정리할 때 사용해요. <table>은 테이블 전체, <tr>은 가로줄, <td>는 데이터 칸, <th>는 제목 칸이에요.

- 구역 나누기 태그 : <div>

 

---

 

오늘 수업 떄 실시간으로 해봤다..

태그의 종류를 우선 알고 있어야 될 것 같다.

과제도 있는데 과제를 억지로 하기보다는 어떻게 되는지 이론을 알 고 싶어 MVP가 끝나기 전에는 코딩이 어떻게 되는지 이해하도록 해야겠다.

코딩발제 듣기 코딩 수업듣기 14:00~16:00

회고 오늘 코딩수업을 들었는데 할 수 있을 줄 알았는데 못하겠당 ㅎㅎ 이론을 읽어봐야겠당 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ