[이해도 자가점검 리스트]에 있는 컨텐츠들을 조금씩 정리해보기로 했다.
배운것을 스스로 정리하는 과정이다보니 글이 길어질 것 같다.
이 목록과 'TIL>포스팅 해보고 싶은 것들'에서 겹치는 항목은 조금 더 자세히 혹은 따로 포스팅을 해보려고 한다.
1. HTML (HyperText Markup Language)
🎃 HTML이란
웹 페이지를 구조적으로 표현하기 위한 마크업 언어로,
쉽게 말해 정해진 규칙에 맞추어, 웹 페이지의 뼈대를 구축하기 위해 기술된다.
웹 페이지의 뼈대가 무엇일까?
구글을 예로 들어 설명할 수 있겠다.
상단에는 Gmail, 이미지검색으로 이동할 수 있는 링크와, 전체 메뉴를 보여주기 위한 메뉴버튼이 있다.
아래로 내려오면 홈페이지 로고,
그 아래로는 검색창,
바로가기 아이콘들이 있다.
이렇듯 일반적으로 어떤 기능을 하는 요소가 어디쯤 배치되는지를 html을 통해 구현할 수 있다.
🎃 HTML 기본 구조
그렇다면, html로 어떻게 페이지의 구조를 만들 수 있을까?
앞서 말한 정해진 규칙에 맞추어 기술해주면 된다.
html의 기본 구조는 다음과 같다.
html은 기본적으로 트리 구조를 가지고 있다.
위 코드를 트리 구조로 표현해보자면 아래와 같은 식이다.
🎃 HTML 태그
html, header, h1 등, 코드블럭에서 봤을 때 <> 로 둘러싸여있는 것들이 html에서 사용하는 태그이다.
<head> 태그 안에는 주로 문서의 메타데이터,
<body> 태그에는 문서의 주된 내용을 담는다.
<header, footer>는 각각 문서의 상/하단에 고정되는 내용을 주로 담는다.
위에 쓰인 태그들 뿐만이 아닌 img, button, ul, a 등 여러가지 쓰임새 있는 태그들이 많다.
각 용도에 맞는 태그 중 자주 쓰는 것들은 추후 포스팅 계획이 있다.
- 태그는 여는 태그, 닫는 태그가 꼭 짝을 이루어야 한다.
ex) <span> 열고 닫자 </span>
- 다만, 태그 중간에 컨텐츠가 들어가지 않고 바로 닫히는 태그도 존재한다.
ex) <img src="image.png" />
위 <img> 태그에서 보이는 src는 태그의 속성 중 하나인데, 각 태그들은 가질 수 있는 속성을 가지고 있다.
공통적으로 이름을 달아주는 id, class 속성이 있다.
id와 class의 구분과 적절한 사용에 대해서도 간단히 포스팅할 계획이다.
이 외에도 각 태그에 맞는 속성은 레퍼런스 사이트들을 참고하는 것이 좋다.
개인적으로 tcpschool의 html 레퍼런스 문서가 잘 정리되어 있어 애용한다.
http://www.tcpschool.com/html-tags/a
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
그런데, 저렇게 줄줄이 요소들을 나열해 놓으면 1990년대보다도 못한 사이트가 완성된다...
html로 구조를 잡은 뒤, 여러가지 디자인 요소들을 통해 스타일링을 해줄 수 있는 것이 있다!
그것이 바로
2. CSS (Cascading Style Sheets)
🎃 CSS란
홈페이지를 멋지게 꾸며주는 스타일시트 언어이다.
어떤 속성과 값을 주느냐에 따라 저 앙상한 아가새가 태극무늬 색을 가진 새로도, 무지개 색을 가진 새로도 바뀔 수 있고
아주 커다란 매로도, 작은 참새로도 바뀔 수 있다!
🎃 CSS 구성 요소
CSS는 기본적으로 선택자(Selector)와 선언(Declarations) 블록으로 구성된다.
선언 블록은 속성과 속성값으로 이루어진다.
이해하기 쉽게 표현하면 이렇다.
선택자는 html 태그요소 (body, div 등), 태그에 부여된 이름 속성(id, class)로 찾는다.
위에 첨부했던 p태그를 다시 가져왔다!
내가 이 Welcome! 이라는 글자를 꾸미고 싶다면,
선택자는 p 가 될 수도, .paragraph 가 될 수도 있다. (id="paragraph"였다면 #paragraph로 잡아준다.)
한 html 문서 안에 p태그가 여러 개 존재할 수 있으니, 공통된 속성이 아니라면 p와 같은 html 요소로는 잘 잡지 않는다.
따로 디자인 속성을 지정해주기 위해 id 또는 class를 부여해주는 것.
선택자 관련 내용은 아래 게시글에 정리해두었다.
2022.10.30 - [공부기록/HTML, CSS] - CSS 선택자 (Selector) / 선택자 찾기 / id vs class
CSS 선택자 (Selector) / 선택자 찾기 / id vs class
🍳선택자란 요소에 스타일링을 적용하기 위해 필요하다. 유닛 회고에서 사용했던 사진을 가져왔다. 🍳body의 텍스트가 빨간색, 30px의 크기를 갖도록 작성됐다. 공포스러운 디자인이 성공적으로
ddorimeo.tistory.com
CSS를 자유롭게 활용하기 위한 레퍼런스 사이트는 mdn web docs를 선호하는 편이다.
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
align-items - CSS: Cascading Style Sheets | MDN
The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
developer.mozilla.org
🎃 Box 구성 요소
문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다.
이 box는 크게 네 가지로 구성된다.
- content (내용)
- padding (안쪽 여백)
- border (테두리)
- margin (바깥 여백)
안쪽에서 바깥으로 넓어지게 작성해보았다.
당장 개발자도구를 켜면 해당 구조를 눈으로 확인해볼 수 있다.
padding은 border와 content 사이의 안쪽 여백,
margin은 border 기준으로 그 바깥 타 요소들과의 여백을 말한다.
이 padding과 margin 값으로 인해 박스와 컨텐츠 배치에 튀어나오는 등의 문제가 생기곤 하는데,
이는 box-sizing 속성을 통해 잡아줄 수 있다.
직접 해보면서 짧게 포스팅 해보려고 한다ㅎㅎ
3. 페이지 레이아웃(Flexbox)
CSS로 레이아웃을 깔끔하게 정렬해줄 수 있는 요소가 있다.
부모 요소에 display: "flex" 속성을 부여해주고, 자식 요소를 정렬해준다.
관련 내용은 아래에 정리해두었다.
2022.11.04 - [공부기록/HTML, CSS] - 페이지 레이아웃(Flexbox)/flex 정렬/flex 너비
페이지 레이아웃(Flexbox)/flex 정렬/flex 너비
CSS로 레이아웃을 깔끔하게 정렬해줄 수 있는 요소가 있다. 🎃 레이아웃 잡기 화면의 레이아웃을 위해 flex 속성을 이용해준다. 복잡한 정렬 작업이 꽤나 간편해지는 좋은 속성이다. 부모 요소에
ddorimeo.tistory.com
4. 웹 앱 화면 설계하기
🎃 와이어프레임(Wireframe)
단순한 도형으로 제작하고자 하는 프로그램의 구조를 묘사한 것이 와이어프레임이다.
와이어프레임이 나타내는 프로그램의 목적을 파악할 수 있게끔 제작해야 한다.
제작하다보니 자꾸 무언가를 추가해야 할 것 같고.. 수정해야 할 것 같은 느낌이 자꾸 들었다.
이게 맞나 싶으면서.. 유튜브를 토대로 실습해보았다.
제작에는 Kakao oven을 사용하였다.
🎃 목업(Mock-up)
목업은 와이어프레임과 달리 디자인요소가 모두 적용된다.
실제 제품의 모습과 동일하게 그려지지만, 기능은 작동하지 않는다.
oven으로 와이어프레임을 구성하고,
html로 구조를 잡고,
css 스타일링으로 마무리했다.
목업 제작 실습이었지만, 기본 제공된 js 파일에 새 메세지를 보내거나 더미 데이터를 불러오는 기능은 구현되어있었다.
목업은 Codesandbox를 통해 작업했다.
CodeSandbox: Online Code Editor and IDE for Rapid Web Development
Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more.
codesandbox.io
페어님이 좋은 의견도 많이 주시고 방향이 잘 맞아서 다행이었다!
역시나 가장 힘든 건 네이밍이과 깔끔한 코드작성이다..
에엥? 작성한 내용이 날아갔따,,😔
html, css는 본격적인 백엔드 학습 전, 프론트엔드와의 협업을 위해 간단하게 학습했다.
역시 결과물을 확인하고 테스트하기가 쉬워서 재미있었다.
지금까지 배운 내용들은 95% 정도 이해를 했다고 생각한다.
주관적으로 필요 없다고 생각한 부분은 최대한 제외하고 정리를 했다고 생각했는데도 한 글에 담아보려니 내용이 많다.
특히 자료를 만들고 캡처해서 편집하는 게 익숙치 않아 시간이 꽤 걸렸다..😓
Java를 시작하게 되면 얼마나 바빠질지 걱정이 된다.
조금 느려져도 내 템포를 잘 찾아서 끝까지 블로그를 완성해내고싶다.
첫 유닛회고 끝!
'공부기록 > 유닛 회고' 카테고리의 다른 글
| S1U9 [Java] 컬렉션(Collection) 회고 (0) | 2022.11.15 |
|---|---|
| S1U8 [Java] 객체지향 프로그래밍 심화 회고 (0) | 2022.11.12 |
| S1U7 [Java] 객체지향 프로그래밍 기초 회고 (0) | 2022.11.12 |
| S1U6 [Java] 기초 회고 (0) | 2022.11.10 |
| S1U4 [Linux] 회고 (0) | 2022.10.31 |
댓글