부트캠프교육중/CSS14 다시정리하기시작함 여기서부터 다시 정리하기 시작함 기준임. 2023. 12. 2. [CSS] 계산기만들기 .calculator { width: 350px; height: 500px; border: 1px solid blue; } body { display: flex; justify-content: center; align-items: center; border: 1px solid red; height: 100vh; } 2023. 8. 17. [CSS] Flexbox flexbox로 레이아웃을 구성한다는 것은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법 # display: flex는 부모박스요소에 적용해, 자식박스의 방향과 크기를 결정하는 레이아웃 구성방법 요소들은 별다른 설정을 해주지 않으면 위쪽에서부터 세로로 정렬, 가로로 넓게 공간을 차지한다. 부모요소인 요소에 display: flex; 작성하니 자식요소인 요소들이 왼쪽부터 가로로 정렬된것이다. 즉 Flexbox 속성을 활용하면 요소의 정렬, 차지하는 공간을 설정해줄수있다. 1. flex-direction : 정렬 축 정하기 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지않으면 기본적으로 가로 정렬을 합니다. 2. flex-wrap : 줄 바꿈 설정하기 하.. 2022. 12. 23. 레이아웃 레이아웃: 각각의 요소를 목적에 맞게 배치하는 것 1.와이어프레임 와이어프레임: 웹 또는 애플리케이션을 개발할때 레이아웃의 뼈대를 그리는 단계 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미 와이어프레임의 가장 큰 목적은 화면의 영역을 구분하는일이다! 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도 전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아닙니다. #목업 (Mock-up) 대부분의 산업에서 목업은 실물 크기의 모형을 뜻합니다. 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성합니다. 예를 들어, 트윗 작성자, 트윗.. 2022. 12. 23. 이전 1 2 3 4 다음
