2022-04-28 (HTML,CSS)

0. 시작하게 된 계기 및 다짐 😮

• 이번 코드스테이츠의 백엔드 엔지니어링 개발자 부트캠프에 참여하게 되면서 현직개발자 분들의 빠른 성장을 위한 조언 중 자신만의 블로그를 이용하여 배운 것 들을 정리하는게 많은 도움이 된다 하여 시작하게 되었다.

  • 그 날 배웠던 것을 길지 않아도 좋으니 정리하며 복습하는 습관 기르기
  • 주말에 다음주에 배울 내용들을 예습
  • 코딩 문제와 java코드들은 꾸준히 학습

1. 학습 목표 😮

목표	결과
Page_Layout 구조실습	O
실제 Web화면 HTML 코딩	O
시맨틱 태그, 와이어프레임, 각 Tag 이용 이유 이해	O

2. 정리

Page Layout

# HTML 구성 
 - 수직분할 : 세로로 짤라서 컨텐츠를 가로로 배치
 - 수평분할 : 가로로 짤라서 컨텐츠를 세로로 배치
 - 기본스타일링 제거 # (box-sizing, margin=0, padding=0)

# Flexbox - 박스를 화면의 크기에 따라 유연하게 잡는 방식
  ==> 가로로 컨텐츠들이 배치되고 내용물의 크기만큼 width적용
  -- Flexbox 이용 
  -- 방향: flex-direction
  -- 얼마나 늘릴 것인가?: flex-grow
  -- 얼마만큼의 크기를 갖는가?: flex-basis
  -- 수평 정렬: justify-content
  -- 수직 정렬: align-items
  

*{
  margin : 0;
  padding : 0;
  box-sizing : border-box;
}

# 부모에게 사용 -> 자식적용
*{ 
display : flex
              inline-flex 

flex-direction : column; (default : row)

Flex-direction : 으로 main axis 선택 (row or column)

 - justify-content : main axis 기준 item 들의 여러 줄 정렬방법
    -- flex-start
    -- flex-end
    -- center
    -- space-between 

 - justify-items : main axis 기준  items 들의 정렬 방법
    -- flex-start
    -- flex-end
    -- center
    -- stretch 

★ align-items,content : main 축 수직방향

==> display : flex ;   조건부

# https://studiomeal.com/archives/197 (참고)


flex-wrap : wrap 공간이 없을시 줄넘김 처리
               warp-reverse ;
}

★ flex-flow : flex-direction flex-wrap ;    -> 한번에



Base_default 값

 -  (팽창지수 ), ( 수축지수) , (기본크기)
     grow          shrink          basis

 -  flex : 0 1 auto  or ( flex-grow : 0;)
  => 자식요소에 직접적으로 적용 (etc. order, align-self)
 
Grow : 1을 줄시 부모요소가 가진 가로길이의 100% ( 다른 자식요소 크기 제외)
  -> 모든 자식의 grow 값의 합에 대한 비율에 따라 달라짐 

# shrink 와 grow 속성은 함께 사용 권장 x
 
basis : 기본 너비 지정

https://velog.io/@jiseong/CSS-flex-basis%EC%99%80-width  (참조)

flex-direction : main축 변경(Row_base)

App화면 설계

# 와이어프레임 : 레이아웃의 뼈대
# 목업 : 실물 크기의 견본 제품
# 프로토타이핑 : 개발초기 모형을 만들어 기능의 요구사항 파악 후 개선방식

# 간단한 HTML 실습

3. 피드백 😮

• 기본적인 HTML 과 CSS를 이용한 아주 간단한 틀을 한번 만들어 보았는데, 실제로 직접 원하는 이미지로 프레임을 짜고 스타일을 적용하는 과정이 쉽지 만은 않았다.

• 내일 배울 실제 트위틀러 구현 과정에서 좀더 연습해 봐야 할 것 다다

4. 앞으로 해야 될 것 😮

• 매일 꾸준히 할 것
  • 꾸준히 velog 작성
  • Java 언어 및 Algorithm 공부(Coding-Test)
  • 틈틈히 운동 하기

---

• 내일 해야 할 것
  • 트위틀러 목업 구현
  • 페어 프로그래밍