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

최근 글

인기 글

태그

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

최근 댓글

티스토리

hELLO · Designed By 정상우.
danc

danc*dev

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
    'codestates_BE_bootcamp39/주단위 일기' 카테고리의 다른 글
    • 2 MAY - Linux
    • 29 APRIL- 1주차 - Pair Programming
    • 27 APRIL
    • 26 APRIL
    danc
    danc
    Backend 개발자를 목표로 공부 중 입니다.

    티스토리툴바