2023-02-16 회고 : HTML/CSS 활용

Jisu An·2023년 3월 29일

CSS html 프론트엔드

코드스테이츠 프론트엔드 부트캠프 44기

목록 보기

3/3

작성 일시: 2023년 2월 16일 오후 10:28
태그: 데일리

오늘 배운 것✏️

Unit4 - HTML/CSS 활용
- Chapter1. 레이아웃
  
  💡 학습 목표
  - 레이아웃을 위한 HTML을 만들 수 있다.
  - Chapter 1-1. 와이어프레임
    
    💡 개념학습
    
    **와이어프레임(Wireframe)**
    
    ➡️ 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계
    - 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것
    - 레이아웃과 제품의 구조를 보여주는 용도
    - 성공적인 와이어프레임 예시
      - 성공적인 예시
      - 와이어프레임을 보고, 어떤 목적을 가진 프로그램인지 유추 가능한가.
      
      우리의 목적
    - 화면의 영역을 구분하는 일
    - 각 영역에서 사용할 주요 태그를 메모하는 형식으로 와이어프레임을 작성
    - 인터페이스를 그림으로 표현하는 와이어프레임이 아니라, 각 영역에서 사용할 주요 태그를 메모하는 형식으로 작성
      
      목업(Mock-up)
      
      ➡️ 실물 크기의 모형을 뜻함
    - 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성
      - ex) 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩하는 방식
      
      ❓ 하드코딩이란?
      - 변수를 사용하지 않고 HTML문서에 하나하나 입력 하는것
      - 동적 웹 애플리케이션을 만들기 위해서는 HTML 문서에 내용들을 변수로 관리하여 값을 동적으로 담아야 함
        
        예시 참고
      ❗ 와이어프레임과 목업을 작성하는 단계를 건너뛰고, JavaScript로 동작하는 애플리케이션을 만들고 싶을 수 있습니다. 그러나 와이어프레임과 목업을 작성하는 단계를 반드시 진행해 주세요. HTML 문서를 통해 화면을 다 그려보지 않으면, JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어렵습니다. 마치 설계도 없이 건물을 짓는 것과 같습니다.
  - Chapter 1-2. 화면을 나누는 방법
    
    💡 개념학습
    
    HTML 구성하기
    - CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행
      1. 수직 분할 ⇒ 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소 배치.
      2. 수평 분할 ⇒ 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소 배치.
        
        수평으로 구분된 요소에 height 속성을 추가하면, 수평 분할을 보다 직관적으로 할 수 있음.

문제점🚨 / 해결💡

🛠 “여러번의 바보짓을 통해 성장하는 나.. 😅”

⚙ 오늘의 과제는 페어님과 함께 CSS를 이용하여 계산기 목업을 만들어 보는 것이었다.

새로 찾은 부분이나 모르는 부분이 있으면 화면 공유도 하고 서로 대화를 하며 1차 계산기 목업을 마무리 하려는데 이게 왠걸 button들이 Screen부분과 과 미세하게 맞지 않았다.

그냥 흐린 눈을 하면 티가 나지 않는 수준이었지만 내가 봐버린 순간.. 계속 신경쓰이고 완벽한 정렬이 아니기 때문에 CSS를 다시 훑어보았다. button에 따로 flex-basic도 줘보고 여러가지를 바꿔 봤지만 바뀌는건 없었다..

⚙ 다른 방법을 생각하다, 개발자 도구를 이용하여 button들을 다 검사 해 보았더니 margin에서 뭔가 이상한 점을 발견 할 수 있었다. 다른 곳들은 margin : 5px이 잘 먹혀 있는데 이상하게 오른쪽 margin이 0이어서 오른쪽으로 치우쳐 있던 것이었다.