프론트엔드 개발을 할 때 필요한 HTML과 CSS의 기본 구조와 문법에 대해 배웠다.
레이아웃 구성을 할때 유용한 Flexbox의 개념도 배우고
와이어 프레임도 잡아보았다
주요내용
1.HTML의 기본 구조와 문법
- 자주 사용하는 HTML요소
2.CSS의 구조와 문법
3.페이지 레이아웃
-Flexbox로 레이아웃 잡기
-Flexboxfroggy 게임
4.와이어 프레임 설계 및 목업 구현
1.HTML의 기본 구조와 문법
HTML은 기본적으로 상위요소에 하위요소들이 달려있는 트리구조로 이루어져 있고,
그 요소들은 <>(태그)로 표현된다.
이때 상대적 상위요소를 부모요소, 바로 뒤 하위요소를 자식요소, 모든 하위요소들을 후손요소라고 한다.
자주 사용하는 HTML요소
<div> Division,
<span> Span
<img> Image
<a> Llink
<ul>vs<ol> Unorderder list , Ordered list
<li> List Item
<input> Input (Text,Radio,Checkbox)
<textarea> Multi - Line Text Input
<button> Button
Block 요소-한줄 차지
ex) <div><p><h1><ul><li>
Inline요소-컨텐츠 크기만큼 차지
ex) <span><a><ing>
헷갈렸던 것들
-<section>요소와 <div>요소의 차이
<section>요소는 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶여서 하나의 구역을 구분하는 데 사용.
<div>요소는 HTML5이전에 하나의 구역(division)을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위해 사용되는 것은 지양되고 있다. 다만, 작은 구역에서 불가피하게 div를 사용해야 하는 경우 사용할 수 있다.
2. CSS의 구조와 문법
기본적인 셀렉터
-id로 이름 붙여서 적용
-class로 스타일을 분류하여 적용
-여러개의 class를 하나의 엘리먼트에 적용
| id | class |
| CSS에서 #idname으로 선택 한 문서에 단 하나의 요소에만 적용 특정 요소에 이름을 붙이는 기능 |
CSS에서 .classname으로 선택 동일한 값을 갖는 요소 많아도 됨 요소의 스타일을 분류하는 기능 |
이외 다양한 셀렉터들 예시
이것도 문제풀며 헷갈렸던 것 위주로 적어보았다 꼭 외울 필요는 없다!
#id .class{...} id가 id이면서 동시에 class명이 class인 요소
div h1{...} div의 후손 요소 중 h1 요소
div > p:nth-alst -child(2n+1) div의 자식 요소 중, 마지막에서 홀수 번째 자식 요소가 p인 경우
다양한 속성들
cloor:글자 변경 속성
font-family-글꼴 속성
fontsize-글자 크기 변경 속성
font-weight-글자 굵기
text-decoration-밑줄, 가로줄
letter-spacing-자간
line-height-행간
text-align-가로로 정렬
3.페이지 레이아웃
box-sizing : 여백과 테두리 두께를 포함한 박스 계산법
Flexbox
부모 박스 요소에 적용해 자식 박스의 방향과 크기를 결정
부모 요소에 display: flex; 넣어 조정
두 개의 축이 있음(고정적이지 않음)
CSS로 화면을 구분할 때는 수직분할과 수평분할을 차례로 적용
수직분할 : 화면을 수직으로 구분, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치.
수평분할 : 분할된 각각의 요소를 수평으로 구분, 콘텐츠가 세로로 배치될 수 있도록 요소를 배치.
부모 요소에 적용해야 하는 속성들
flex-direction : 정렬 축 정함
flex -wrap : 하위 요소의 크기가 상위 요소의 크기를 넘으면 자동 줄바꿈
jistify-content : 축 수평 방향 정렬
‘진행 축’ 정렬과 아이템 사이의 간격을 제어.
flex-direction: row | row-reverse 인 경우 x축 정렬을 제어.
flex-direction: column | column-reverse 인 경우 y축 정렬을 제어.
align-items: 축 수직방향 정렬
자식 요소에 적용해야 하는 속성들
Flex속성-
<grow(팽창지수)>
<shrink(수축지수)>
<basis(기본크기)>
기본 설정 flex 0 1 auto
grow는 팽창지수의 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지
flexbox froggy게임
flexbox 이용하여 개구리 옮기는 게임 ㅎㅎ재밌음
4.와이어 프레임 설계 및 목업 구현
프로토타이핑: 개발 초기에 모형을 만들어 기능의 요구사항을 파악 후 반영하는 개선 방식
이때 와이어프레임을 작성하여 모형을 만든다.
웹 앱 구조 잡는 순서
1.큰 틀에서 영역 나누기
2.각 영역을 태그로 표현
Oven이라는 툴을 활용하여 실제 와이어프레임을 작성해 보았다.
나는 이날 점심에 서브웨이를 너무 맛있게 먹었던게 인상깊어서 서브웨이 영양성분 페이지의 일부를 와이어프레임으로 작성해 보았다.
대략 이런 구조였고
완성품은
기본 구조는 비슷하게 하되 위에 검색창이 있으면 더 좋을 것 같아서 UX를 고려하여 제품명 검색 창만 추가해 보았다.
학습 후 느낀점
생각의 전환, 나에게 맞는 루틴을 찾자
백엔드 개발이지만 프론트엔드 개발자분들과 소통하며 협업할 일이 많기에 본격적 코스에 앞서 전반적인 프론트엔드 지식을 배웠다. 근데 내가 짠 코드들이 눈에 바로바로 보이니까 생각보다 더 재밌었다.
강사님이 백엔드 수강생 중 한분이 프론트엔드 과정을 배워보니 너무 재미있어서 도저히 안되겠다고 프론트엔드 코스로 옮겨가겠다고 하고 갔다고 하셨는데(ㅋㅋ) 그분의 마음이 약간은 이해가 갔다.
동기분들끼리 실습한걸 디스코드에 공유해서 구경했는데
다들 잘하셔서 놀랐다. 내가 만든건 귀여운 수준인데.. :(((
다른분들과 비교하는거 하지 않겠다고 다짐했는데 어쩔 수 없나보다.
실력자분들이 그만큼 많다는 거니까 그런 분들과 같이 공부를 하며 배우는 점들이 많을 거라고 생각한다.
한 개념이 끝날 때마다 배운 것을 내용 별로 다 정리하여 블로깅 하는 것이 계획이었는데 생각보다 시간이 꽤 걸린다.
공개적 공간에는 유어클라스의 사진과 내용을 그대로 쓰는것이 어렵기에 나만의 설명방식을 찾아야 함이 가장 큰 이유이다.
모든 공부에는 꾸준함이 중요하다고 생각하기에, 무리할 정도로는 하지 않는 것이 좋을 듯하다.
오히려 계획을 지키지 못하면 성취감이 떨어지고, 반복되어 습관이 되어 버릴 수도 있기 때문이다.
그래서 더 효율적인 블로깅 방법을 생각해보는 중이다.
모든 내용을 정리한 것은 개인소장하는 것으로 하고 블로그에는 헷갈렸던 내용이나 느낀점 위주로 쓰는 것이 어떨까 싶다.
아직 초반이니까 모든것이 자리가 잡아가면 이것도 익숙해지고 나만의 루틴이 생길 것이라고 생각한다.
'HTML,CSS' 카테고리의 다른 글
| 트위버 목업 구현해보기 (0) | 2022.09.03 |
|---|