display: inline ; 한글에서 사용하는 '어울림' 과 유사함width, height 값의 적용이 되지 않는다.margin 적용 X, padding 적용 O대표 태그: span, a 등 display: block;한글에서 사용하는 '자리 차지' 와 유사함 옆
📍 HTML 문서의 기본 구조 vscode 에디터에서 ! + tap키 로 자동완성 된다. 📍 CSS 파일은 따로 만들어 link tag 연결하자 너무 많은 내용을 html 문서에 다 적는다면 가독성이 떨어지고, 추후 코드 리팩토링이 어려워진다. html의
css 레이아웃을 위한 display 속성.아이템을 행 또는 열로 자유자재로 배치할 수 있음.중심축을 잘 생각해야함flex 에서는 우선 중심축과 반대축의 개념을 잡는게 중요!display: flex; 로 꼭 flex 임을 선언 후에 속성들 사용!flex-directio
📒 간단히 구현된 화면에 나눈 구역과 중요하다고 생각되었던 스타일을 적어본다. white-space: 요소가 컨텐츠가 길어질때 공백과 줄바꿈을 어떻게 할지 정하는 속성normal : 정해진 가로폭 보다 컨텐츠 글이 길어지면 자동으로 줄바꿈함nowrap : 정해진 가
컨텐츠의 좌표 이동이 가능하게 함.내 기준점을 정해줌해당 컨텐츠를 공중에 띄워 보기에는 위에 있어 보이게함.positon 속성 지정 후 left, right, top, bottom 좌표 값 지정가능. (- 값도 가능) static (기본값) : 좌표이동 안함 relat
📍배경 이미지를 넣을때는 CSS 'background-image' background-image : url (이미지 주소 또는 경로); 배경 이미지를 겹쳐보고 싶으면 위의 코드에 , url(이미지 주소 또는 경로); 사용 background-size : 이미지
배울때는 '아~' 하고, 선생님이 하시는 걸 보고 따라 할때는 쉬웠던 것들인데 막상 혼자 하니 어려웠고 이렇게 사용하는게 맞나 싶었다. 🤦🏻♀️머리속에 있는 것을 글로 적으면 더 명확하게 알 수 있기에 혼자서 정리를 한번 해보는 시간을 갖도록 하자.선택자 뒤에 붙
작명시 모듈단위로 나눠서 작성하는 방식작명 시 공통된 스타일에 클래스명 하나, 세부적으로 다른 스타일에 클래스명 하나를 작명하여 사용한다. 장점CSS 코드의 양이 줌코드 짜는 시간이 단축됨.유지보수가 편리함단점 : 너무 많아진 클래스명 때문에 가독성이 떨어질 수 있다.
📍 반응형 웹이란? 요즘 다양해진 브라우저 사이즈에 맞춰서 UI 의 디자인이 바뀌는 것을 말한다. 📍 반응형 웹에서 많이 사용하는 단위 vw: 브라우저에 보이는 가로폭 vh: 브라우저에 보이는 세로폭 % : 부모태그의 크기에 몇%을 받아오는지 rem: 기본
📍 CSS 에서 폰트를 바꿀 수 있는 font-fmaily 속성 font-family 여기서 지정하는 폰트 또는 부모태그에서 inherit 되어 body 태그에 적용되게 css 작성함 📍웹폰트 첨부방법 CSS파일에서 @font-face 속성으로 불러올 수 있음
Temp Body
애니메이션 만들때는 기억하자!! 시작스타일 만들기 최종스타일 만들기 언제 최종스타일로 변하는지 transition 속성으로 애니메이션 입히기.✓ 만들때 어려웠던점 처음에 마우스를 사진에 올렸을때 회색 박스가 보여지게 하는건'opcitiy 조절로 하면 되겠다.' 생각했지