Section1 Unit4 HTML, CSS 활용

---

Section1 Unit4 [HTML/CSS] 활용

 

📌 Chapter1. 레이아웃

• 와이어프레임과 목업

 와이어프레임과 목업을 작성하는 단계를 건너뛰고, JavaScript로 동작하는 애플리케이션을 만들 수 있지만 HTML 문서를 통해 화면을 다 그려보지 않으면 JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어렵다. 마치 설계도 없이 건물을 짓는 것과 같으니 와이어프레임과 목업을 작성하는 단계는 중요하다.

 → 와이어프레임: 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계. 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것

→ 목업: 실물 제품이 없는 무형의 웹 또는 앱의 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것

 

• Atomic CSS 방법론

 Atomic CSS 방법론은 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법이다.

 CSS 방법론 중 BEM만 알고 있었는데, Atomic CSS 방법론도 알게 되었다.

 

• 레이아웃 리셋

 HTML 문서는 기본적인 스타일을 가지고 있는데, 때때로 이 기본 스타일이 레이아웃을 잡는 데 방해가 되기도 한다. 이러한 수요에 따라 초기화(리셋)를 위한 다양한 라이브러리(Normalize.css 등)가 등장했지만 사실 굳이 라이브러리를 사용할 필요는 없으며, 위에 언급한 문제를 해결할 몇 줄의 코드를 적용시키면, 기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현할 수 있다. 

 퍼블리셔로 일을 하면서 봐왔던 건데, 레이아웃 리셋은 작업자마다 각자 자신의 스타일대로 레이아웃을 리셋하는 방식이 있었던 것 같았다. 굳이 라이브러리를 사용할 필요는 없다는 데에 나도 동의한다. 

 

• Atomic CSS를 적용한 VS Code 레이아웃 작성 

 사실 Atomic CSS 까지는 지금 굳이 알 필요는 없을 거라고 생각해서 한 번 훑어보고 지나갔는데, 마침 VS Code 레이아웃을 작성해보라는 과제가 있어서 Atomic CSS를 적용해서 만들어봤다! 이렇게 하는게 맞는지는 사실 잘 모르겠지만.. 여튼 레이아웃 만들기는 완성!

See the Pen layout 예시 by sowon (@hello_FAY) on CodePen.

 

 

📌 Chapter2. Flexbox

• CSS Flexbox(Flexible Box)는 HTML 요소의 레이아웃을 관리하기 위한 기술로, HTML 요소를 수평적으로 또는 수직적으로 정렬하거나 간격을 조절하는 등의 레이아웃 조작을 쉽게 할 수 있도록 한다.

 Flexbox는 flex container(부모 요소)와 flex item(자식 요소)로 구성되며, flex container에 display: flex 속성을 적용하여 Flexbox 레이아웃을 활성화할 수 있다. flex container 내부의 각 요소는 flex item으로 지정하여 레이아웃을 구성한다. flex item은 순서, 크기, 간격 등의 속성을 사용하여 레이아웃을 유연하게 구성할 수 있다.

 Flexbox를 통해 반응형 웹 디자인이나, 복잡한 레이아웃을 쉽게 구성할 수 있다.

 Flexbox는 CSS3에서 도입된 기술이며, 모든 최신 브라우저에서 지원된다.

 

 플렉스박스는 따로 정리해서 다시 링크할 예정!

 

⭐️ 과제. 계산기 목업 만들기

• 이번 유닛의 과제로 페어와 함께 계산기 목업 만들기를 했다. 우선 모양은 다 만들었는데, 각자 공부하고 수정도 해서 월요일에 다시 만나기로 해서 다음번에 포스팅해야지~ :)

 

 ↓ 월요일에 바로 정리를 해서 업로드를 했다 :)

Section1 Unit4 HTML, CSS 활용 - 계산기 만들기

---

🌙  오늘의 회고

 오늘은 레이아웃을 짜는 방법과 와이어프레임을 짜는 것과 플렉스박스를 활용하는 것을 공부했다. 플렉스박스를 알고는 있고, 자주 사용도 했는데 뭔가 내가 생각한대로 빠르게 그려지지가 않아 조금 답답했다. 안다고 생각하고 실습을 넘기지 말고, 실습을 하면서 확실히 아는 것인지 다시 되새겨 봐야겠다는 생각이 들었다.

 첫 페어 프로그래밍을 진행했다! 이런식으로 진행하는게 맞는지는 잘 모르겠지만 오, 꽤 재미있었다! 온라인으로만 수업에 참여하니 혼자 공부한다는 느낌이 좀 있었는데, 함께 공부한다는 느낌도 들어서 좋았다. 페어 프로그래밍 실습 전에 한 번 만들어보고 들어갈까 했었는데, 시간이 부족해서 그렇게 하지는 못했다. 미리 해보지 않고 시작하니 내가 몰랐던 부분들을 더 확실히 알 수 있게 되어서 좋았던 것 같다.

 이렇게 한 주가 지났다. 주말동안 더 열심히 화이팅..!