Enjoy Programming

부모는 어떤 방식으로 자식을 위치 시키는가 flex박스에서 자식요소들에 위치를 시킬땐 분명 부모요소에 명령을 줬다 그런데 자식요소에게 명령을 줄 수 있는 property가 있다 바로 align-self와 order이다. align-self는 align-items와 비슷한 일을 하는데 이는 cross axis에 관한 내용이다 하지만 align-items와는 다르게 한 box에만 해당한다. 예를들어 박스 세개를 설정하고 flex시켜준 뒤 하나만 화면 세로 중앙에 배치하고 싶으면 align-self를 이용해서 center로 지정해주면 된다. *단 기본적으로 부모 요소 박스는 자식요소 박스의 height와 같다 따로 부모요소의 height를 꼭 지정해줘야 뷰포트 상에 세로 위치를 변경할 수 있다. 그리고 ord..

flex-box의 룰은 간단하다. 1. flexbox는 자식요소와 이야기 하지 않는다. 간단히 말해 내가 움직이길 원하는 박스들이 있다면 그 박스들에 flexbox로 조정을 하는게 아닌 그 박스들을 감싸는 flexbox container box를 만들어서 거기에 flexbox로 이야기 해야한다. 항상 붙어있는 부모 요소가 자식 요소의 위치를 움질일 수 있다는 얘기. 2. flexbox는 main-axis와 cross-axis가 있다. flex-direction : row일때 (default) - 수평축이 main-axis main-axis일때 justify-content를 사용하면 box들을 수평축에서 이동이 가능하다. cross-axis방향으로 box를 이동할 땐 align-items를 사용하면 된다...

기본적으로 블럭요소는 옆에 아무것도 올 수 없다. 그저 아래로 쌓아나갈 뿐이다. 이것을 없애주는 것은 display: inline-block으로 옆으로 위치 할 수 있게한다. 근데 display property에는 inline이라는 값도 있다. 무슨 차이인가? 인라인은 박스가아니다. 유동적인 요소라 너비와 높이가 없다. 그저 직선상에 있다는 의미이다. 예를들면 텍스트가 그렇다. .box { background-color: blue; width: 100px; height: 100px; margin-bottom: 2px; display: inline-block; } 이런 코드가 있다고 생각해보자 저상태면 이렇게 박스가 설정 된다. 근데 inline-block을 inline으로 바꾼다면? 화면에 노출 되지 않..

금일 과제는 이 레이아웃을 만드는 거다~ 우선 내가 만든 코드는 깃헙주소를 적어놓겠당 github.com/lee-tae-eon/cocoa-challenge/tree/main/library-screen lee-tae-eon/cocoa-challenge nomad coder cocoaclone challenge . Contribute to lee-tae-eon/cocoa-challenge development by creating an account on GitHub. github.com 이제 코드를 리뷰해보면 먼저 레이아웃이아닌 바깥영역은 검은색으로 지정하고 height 100vh로 지정해놓았다. 그리고 레이아웃을 중앙에 위치시키기 위해 flex, center로 놓는다. 그리고 레이아웃을 감싸는 큰 박스 ..

오늘 만들어할 레이아웃이다.~~만들어보자~ 조건읜 외부 스타일 시트 사용과 pseudo selector를 사용하고 position속성을 사용해야 한다. 아 꽤나 빡셌다.. 이게 맞는지는 모르겠지만 ..뷰포트.. 아 머리야... 우선 html부터 보자 뭐 제목~ 두번째 토마토 틸색상 박스 세번째 발리우드 쓰리틀 색상 박스 이렇게 세개로 할 수 있겠지만 큰박스 하나에 다른 박스들은 포지션 absolute로 각 꼭지점에 박아 보기로 생가각했다. 먼저 h1태그로 제목 설정해주고 메인박스 하나 만들고 그안에 세컨드박스 4개를 만든다. 그리고 그 안에 다시 박스를 하나 더 만들고 그 박스안에 h3 와 h5의 부제목들을 달아주자. 이제 css 로 넘어와서 먼저 서체를 times로 잡아주고~ h1과 mainbox가 중..

오늘 챌린지 종목은 box다루기 이다.,~ 이런 box layout 만들기. requirement - use external css 외부 css 파일 임포트 하기가 전부다 자 만들어보자 그냥 보면 배경화면색주고 div로 박스 하나 만들어주고 박스안에 박스 세개를 만들어주자. 그리고 background-color에 #ff6447을 바디에 준다. ( colorzilla로 색은 따오면 된다. ) 똑같이 바디안의 첫번째 박스에 #f5deb3색상을 주자 그리고 그안 박스에 #008080색을 준다. 아직 박스 크기들을 설정은 안해줬으니 될리가 없다. 음 페이지롤러로 사이즈 재보니 대충 첫번째 박스가 240px씩이고 그 안에 세개는 60px씩이다 주자 이런 박스가 만들어졌다~~~ 이제 해야할 것은 화면 중앙에 배치해..