HTML CSS 활용, flexbox

day + 9

HTML + CSS 활용

✅레이아웃

: 웹 / 앱에서 각각의 요소를 목적에 맞게 배치하는 것



✅wireframe

: 레이아웃의 뼈대를 그리는 단계

단순히 선이나 도형으로 웹/ 앱의 인터페이스를 시각적으로 묘사한 것

ux를 포함하지 않고, 레이아웃과 제품의 구조를 보여주는 용도.

💡 HTML 구성하기

수직분할 -> 수평분할

콘텐츠를 가로로 분할하여 배치한 뒤에,

배치한 요소들을 세로로 분할하여 배치한다.

<레이아웃 리셋>

* {
    box-sizing : border-box;
}

body {
    margin: 0;
    padding: 0;    
}

💡flexbox

css flexbox 속성을 활용하여 vscode 목업을 만들었고

페어와 함께 만드는 계산기 목업 밑작업을 시작했다

flex-direction: row와 column인 것을 오와 열을 맞춰서 출력되게 하려니까 잘 안 돼서 골치 아팠다

결국 페어님과 내 코드를 하나씩 뜯어보며 문제점을 찾게 되었다

바보같이 바로 윗 부분에 클로징 태그를 작성하지 않아서 그 밑에 태그들이 하나로 묶여있던 상황이었다

문제를 찾고 나니까 그 뒤로는 빠르게 진도가 나갔다!

flexbox 개념이 어렵고 추상적으로 다가왔는데 직접 활용해보니까 이제 좀 알 것 같다고 느껴졌다

재미있는 것 같다!