Today I Learned/HTML CSS
-
09/21 TIL : absolute, width 33%, sticky, row-reverseToday I Learned/HTML CSS 2022. 9. 22. 01:56
position: absolute; : 자기 자리만큼의 크기만 지정됨 /* .open-post__photo { position: relative; } */ .open-post__heart-count{ position: absolute; } width: 33% : 중앙 정렬할 때, absolute쓰면 이상하게 나올 때가 많으니 대신 width를 준다. .alt-header__column{ width: 33%; } .alt-header__column:first-child{ margin-right: auto; } .alt-header__column:nth-child(2){ /* positon: absolute; */ text-align: center; } .alt-header__column:last-child..
-
09/20 TIL : div를 가로로 배치하는 방법, position:absolute;와 relative;Today I Learned/HTML CSS 2022. 9. 21. 01:52
박스를 가로로 배치하기 1) float div{float: left;} div{clear: both;} 2) inline-block : 자기 자리만큼 자리차지. 공백제거 필요 : 주변에 글이 있으면 이상해짐 > vertical-align 하기 3)display: flex; : 부모-자식 관계에서만 적용 / 부모-손자는 적용안됨 position: absolute; : 가장 가까운 relative를 가진 부모 기준으로 움직임 : 기본은 body, 지정하고 싶다면 부모 container에 position: relative; 주기 점 만들기 : 마찬가지로 위치 잡을 때, 위에 position: relative; 주기 .dot { background-color: tomato; width: 5px; height: ..
-
09/19 TIL : BEM, flex-direction, nav구조, border-boxToday I Learned/HTML CSS 2022. 9. 20. 01:01
BEM(block element modifier) : 내가 내 코드를 다시 볼 때, 남들이 내 코드를 찾아 볼 때 이해하기 쉽게 함. class 이름이 길어진다는 단점이 있음 block class="btn" block__element class="btn__price btn__text" block__element--modifier class="btn--orange btn--big" flex-direction: column; : 중앙 세로로 정렬! display: flex; /* flex-direction: column; */ align-items: center; font-weight: 500; display: flex; flex-direction: column; align-items: center; fon..
-
09/19 TIL : CSS media queriesToday I Learned/HTML CSS 2022. 9. 19. 13:53
Media Queries @media screen{} : 스크린 사이즈별로 어떻게 보여줄지 정함. 핸드폰 사이즈에 맞춰서 보여줘~ and로 조건들을 나열, {} 안의 것을 실행 @media print{} : 인쇄할 때, 배경그래픽을 체크하면 나옴 브라우저에서 inspect의 device toolbar : 핸드폰 기종별, 아이패드 사이즈로 브라우저를 볼 수 있다. and (orientation: landscape){} : 세로모드인지 가로모드인지 감지 가능 body{ display: flex; justify-content: center; height: 100vh; align-items: center; flex-direction: column; } div{ background-color: teal; widt..
-
09/19 TIL : CSS var(), transition, transform, animationToday I Learned/HTML CSS 2022. 9. 19. 11:18
::placeholder, ::selection Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta eum ratione amet soluta nisi hic repellat, suscipit nesciunt aliquam aut at quos sequi, placeat et eaque, accusantium ab illum omnis? Colors and Variables CSS에서 color를 표현하는 3가지 방법 { background-color: #2ecc71; background-color: rgb(252, 206, 0); background-color: rgba(252, 206, 0, 0.5); } 1) hex code : #2ec..
-
09/18 TIL : CSS fixed, :nth-child, hover, flexToday I Learned/HTML CSS 2022. 9. 19. 10:23
Position: fixed; 레이어를 무시하고 가장 위의 레이어에 위치하게 됨 top, bottom, left, right 중 하나라도 지정하면 다른 요소의 위치를 고려하지 않고 덮어버림 position: relative; position: absolute; 원래 있던 곳을 기준으로 이동 가장 가까운 position:relative; 인 부모를 기준으로 이동 Pesudo Selector 예를 들면, div 바로 밑의 자식 중 span 만 선택하는 방법 부모 자식 {} div span{} → 부모의 inside 부모 > 바로 밑 자식 {} div > span{} → 부모의 under 비슷한 A1 + A2 {} p + span{} → A1의 next *= is 'contains' input[placehol..