본문 바로가기

html, css

(9)

마진 겹침 현상(margin collapsing) 참고https://developer.mozilla.org/ko/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsinghttps://youtu.be/c19Mjg-ivxc?si=kzFGncB5IBQzRxKihttps://velog.io/@devsaza/likealion006https://velog.io/@ursr0706/%EB%A7%88%EC%A7%84margin 마진 겹침 현상(마진 상쇄 현상) 여러 블록의 margin 상하 값이 경우에 따라 제일 큰 margin 값을 가진 단일 margin으로 결합(상쇄)되는 현상 (단, float 속성값을 줬거나 position 속성 값이 절대요소(absolute, fixed, sticky...)즉 인접한 요소 간의 위아래 ..

Flex vs Grid 참조https://studiomeal.com/archives/197 https://studiomeal.com/archives/533https://www.youtube.com/playlist?list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9 Flex - flexbox : 행 또는 열을 주축으로 설정해 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식플렉스 박스 방식으로 레이아웃을 구성하기 위해 플렉스 컨테이너를 만들며, 플렉스 컨테이너 내에 플렉스 박스 방식으로 배치되는 요소를 플렉스 아이템이라고 한다. 이 때 아이템이 배치된 방향의 축을 메인축(이미지에서는 오뎅꼬치의 느낌?)메인축과 수직인 축을 교차축이라 한다. * flex container에 적용하는 속성 See the Pe..

CSS Grid 정리 참고 자료 https://youtu.be/nxi1EXmPHRs 그 외에 추가로 확인하면 좋은 블로그 https://studiomeal.com/archives/533 https://nykim.work/59 item1 item2 item3 item4 item5 item6 item7 item8 item9 item10 이 코드 내에서 대충 용어들을 정리하자면, Grid Container , grid의 전체 영역 Grid Item Grid Container의 자식 요소들로, Grid Track Grid의 Row나 Column Grid Cel Grid 한 칸을 의미하며, Item은 실제 html 태그 요소를, Cell은 item 하나가 들어가는 가상의 칸(?) Grid Line Grid Cell을 구분하는 선 Gr..

코누나님 - HTML, CSS / Chapter 7 - 반응형 웹사이트 만들기 Bootstrap https://getbootstrap.com/docs/5.1/layout/grid/ Grid system Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes. getbootstrap.com bootstrap은 웹사이트 전체를 12등분함 웹사이트의 구역을 12의 약수들만큼 나눔 col-sm-12 클래스를 각 박스마다 추가해준다. 이 때 12, 3은 비율을 의미 엔믹스 지니 Some quick..

코누나님 - HTML, CSS / chapter 6 - Spotify 웹사이트 만들기 html Premium Support Download | Sign up Log in Listening is everything Millions of songs and podcasts. No credit card needed. Get Spotify free COMPANY About Jobs For the Record COMMUNITIES For Artists Developers Advertising Investors Vendors USEFUL LINKS Support Web Player Free Mobile App USA Legal Privacy Center Privacy Policy Cookies About Ads Additional CA Privacy Disclosures © 2021 Spotify A..

코누나님 - HTML, CSS / chapter 5 - HTML을 좀 더 쉽게 움직이는 방법 static : 웹사이트의 기본 속성값(default 값) , top right bottom left 등 위치 속성은 무시됨. relative: HTML 태그가 있는 위치에서 left right top bottom값을 통해 움직임 absolute: 부모영역에서 left right top bottom 을 이용해 절대값 기준으로 주어진 위치로 움직임 * 단! 여기서 부모란?: 부모 태그가 relative, absolute, fixed 속성 중 하나여야 함. 만약 부모태그가 해당 속성을 가지고있지 않다면 body태그 기준으로 움직임 왜냐하면 body태그는 relative를 기본 속성으로 가지고 있기 때문이다 fixed : absolute와 비슷하지만 스크롤로 내려도 그 위치에 고정, 무조건 브라우저 창 기준임..

코누나님 - HTML, CSS / Chapter 4 - 구글 웹사이트 만들기 구글 웹사이트를 만들기 앞서 먼저 페이지의 구역을 나눠보라고 하셨다.이렇게 세 구역으로 나누는게 제일 정석인 것 같다.. 강사님의 구글화면과는 달리 난 다크모드를 사용하고있어서한번 다크모드로 만들어보기로 했다...^^ https://contrastchecker.com/ WCAG - Contrast CheckerCheck the contrast of your color design for accessibility base on Web Content Accessibility Guideline (WCAG)contrastchecker.com다크모드 색깔 잘잡았는지 확인해주는 사이트. Google 정보 스토어 ..

코누나님 - HTML, CSS / Chapter 3 - CSS 웹사이트 꾸미기 Box 1 Box 2 Box 3 이 때 여기서 box 2에게 display : none, visibility : hidden을 각각 적용해보고 무슨 차이점이 있느냐고 하셨다. 딱봐도 대충 감이 오지만... display : none은 그냥 얘 자체를 배치하지 않겠다여서 Box3이 Box2의 빈자리를 채울 것이고, visibility : hidden은 보여지는 것을 숨기는 것으로 Box2가 실제 배치는 되어 있지만 우리 눈에는 안보일 것이다. .green { display : none; visibility : hidden; border : 50px solid green; } 실제로 차이를 확인해 보기 위해 일단 코드에는 둘다 작성해두고 개발자 도구를 이용해 비교해보도록 하자. 그리고 색깔을 바꿔보기도 있었..

이전 1 2 다음

티스토리툴바