12/23 정리 HTML/CSS 활용

와이어프레임(Wireframe)

단순한 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것. 화면의 영역을 구분한 것.

목업(Mock-up)

실물 크기의 모형 의미. 실제 웹페이지가 작동하는 모습과 동일하게 HTML문서를 작성한다.

화면 나누는 방법

수직분할 - contents가 가로로 배치될 수 있도록 한다.

수평분할 - 내부 contents가 세로로 배치될 수 있도록 한다. height속성을 사용하면 좋다.

레이아웃 리셋

HTML의 기본적인 스타일이 있기 때문에 의도한대로 레이아웃을 잡는데 방해가 되기도 한다.

라이브러리를 사용해도 되지만 css로 기본 스타일링을 제거하고 사용해도 된다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

* flex를 지정하면 기본적으로 contents의 크기만큼 너비를 차지한다.

• 부모요소에 설정해주는 속성

⓵ flex-direction : 자식요소를 정렬할 정렬축 설정

⓶ flex-wrap : 하위요소의 크기가 상위요소를 넘으면 줄바꿈을 해줄것인지 설정

⓷ justify-content : 자식요소들을 축의 수평방향으로 어떻게 정렬할지 설정

⓸ align-items : 자식요소들을 축의 수직방향으로 어떻게 정렬할지 설정

• 자식요소에 설정해주는 속성

⓵ flex-grow : 요소 크기가 얼마 늘어날 수 있는지 설정

⓶ flex-shrink : 요소 코그가 얼마나 수축될 수 있는지 설정

⓷ flex-basis : 요소의 기본크기 설정

* grow속성과 shrink속성은 같이 사용하지 않는것을 권장한다.

페어 프로그램 - 계산기 목업 만들기

앞에서 이론적으로 배운것을 제대로 실습하는 첫 과제였다. 아직 완성은 하지 않았지만 확실히 실제로 코딩을 해 보니

이론적으로 봤던 부분들은 이해하기 쉬워진 것 같다. Flex라는 기능이 정렬하기에 매우 좋은 것 같다.

세로정렬할 때 조금 헷갈리는게 있었는데 잘 해결된 것 같다. 제일밑에 숫자 0을 어떻게 처리할까 고민했는데

div박스 2개를 하나로 보이게끔 border를 지우고 margin과 padding을 조절해봤다. 좀 더 깔끔한 방법을

찾아봐야 되겠다.

공부기록