danc
danc*dev
danc
  • 분류 전체보기
    • codestates_BE_bootcamp39
      • 주단위 일기
      • 회고
    • programming
      • JAVA
      • SPRING
      • GENERAL
      • LINUX
      • ALGORITHM
      • ERROR_HANDLING
    • web
      • NETWORK
      • DB
      • HTML
      • CSS
    • kr
    • nz

최근 글

인기 글

태그

  • 윈도우 11 우분투
  • React에서 Authorization헤더
  • 코드스테이츠 백엔드
  • TIL 일기
  • TIL일기
  • 코드스테이츠
  • 회고
  • HTTP
  • 일기
  • AOP
  • TIL
  • css

최근 댓글

티스토리

hELLO · Designed By 정상우.
danc
codestates_BE_bootcamp39/주단위 일기

28 APRIL - css flex

28 APRIL - css flex
codestates_BE_bootcamp39/주단위 일기

28 APRIL - css flex

2022. 4. 28. 15:13

오늘 5줄후기

 

다음주 부터 선택과 집중을 잘 해야할 것 같다. 처음 배우는 걸 익히면서도 동시에 블로그 정리를 같이 하다보니 시간이 너무 많이 소요되어 뒷부분은 거의 쫒아가듯이 했다 너무 욕심 부리고 있는것 같다는 생각이 들었다. 그래도 오늘은 얼추 시간안에 끝냈지만 나중에는 이렇게 못할것 같음. 

위의 문제로 인해서 새로운 방법으로 공부내용 정리는 키워드 위주로 일단 적어놓고 끝나기 전 남는시간, 추가 공부 시간에 복습과 동시에 정리 예정

어제의 연장선상으로 혼자서 공부하는 HTML/CSS는 오늘로써 마지막 이었는데 재미 있다가도 디자인이 내가 생각하는 것 처럼 바로바로 멀쩡하게 나오질 않는데서 오는 답답함이 조금 있었다. 

뭔가 벌써 엄청 많이 한 것 같은데 전체 분량을 봤을때는 시작도 안했을듯? 자바 하나도 모르는데 열심히 해야지!

오늘도 시간이 아주 빨리 지나갔다. 


오늘의 수확물

flexbox 라는걸로 페이지 레이아웃 만드는걸 해봤는데 어떻게든 쑤셔 박았다.. 제대로 이해한건지 아직도 모르겠어서 저녁에 더 공부 해야겠다. (아래에 코드 첨부 해놓았다)

 

와이어프레임도 실습 해보았는데 이게 맞나?? ㅋㅋ

 

  • HTML 레이아웃 리셋하기
  • Layout with Flex Container
  • flex 컨테이너 (Parent) 의 속성
  • flex 아이템 (Child)의 속성
  • 와이어프레임 (Wireframe)

 

코드보기

더보기

 

<!DOCTYPE html>
<html>
<header>flexbox practice</header>
<br><br>


<style>
    #container {

        border: 1pt solid red;
        display: flex;

        margin: 10pt;
        padding: 10pt;
        width: 85%;
        height: 80vh;
    }
    #left_side {


        
        border: 2px solid red;
        margin: 10px;
        flex: 1 1 200;
        align-items: stretch;


    }
    #middle_area {

        

        border: 2px solid red;
        margin: 10px;
        flex: 3 1 auto;
        align-items: stretch;
    }
    #right_area {

        

        border: 2px solid red;
        margin: 10px;
        flex: 10 1 auto;
        align-items: stretch;
    }
    .icons {
        border: 1px solid yellow;
        
        margin: 10px;
        width: 6vw;
        height: 7vh;
    }
    .area1 {
        border: 1px dotted blue;
        margin: 10px;
        
        height: 30%;
    }
    .area2 {
        border: 1px dotted blue;
        margin: 10px;
        
        height: 30%;
    }
    .area3 {
        border: 1px dotted blue;
        margin: 10px;
        
        height: 15%;
    }
    .area4 {
        border: 1px dotted blue;
        margin: 10px;
        height: 55vh;
    }
    .area5 {
        border: 1px dotted blue;
        margin: 10px;
        height: 15vh;
    }

</style>

<body>
    <div id="container">
        <div id="left_side">
            <div class="icons">Icon1</div>
            <div class="icons">Icon2</div>
            <div class="icons">Icon3</div>
        </div>

        <div id="middle_area">
            <div class="area1">Area1</div>
            <div class="area2">Area2</div>
            <div class="area3">Area3</div>
        </div>

        <div id="right_area">
            <div class="area4">Area4</div>
            <div class="area5">Area5</div>
        </div>
    </div>
</body>
</html>

 

 

 

저작자표시 (새창열림)

'codestates_BE_bootcamp39 > 주단위 일기' 카테고리의 다른 글

3 May - Git  (0) 2022.05.03
2 MAY - Linux  (0) 2022.05.02
29 APRIL- 1주차 - Pair Programming  (4) 2022.04.29
27 APRIL  (0) 2022.04.27
26 APRIL  (0) 2022.04.25
  • 오늘 5줄후기
  • 오늘의 수확물
'codestates_BE_bootcamp39/주단위 일기' 카테고리의 다른 글
  • 2 MAY - Linux
  • 29 APRIL- 1주차 - Pair Programming
  • 27 APRIL
  • 26 APRIL
danc
danc
Backend 개발자를 목표로 공부 중 입니다.

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.