생각기록

앞서 레이아웃에 중요한 position과 transform을 배웠다. 더불어 중요한 display가 있다. display: 공간 요소를 어찌 보여줄지 정하는 기능 • inline - 글자만큼 공간차지(=글자), 같은 인라인 속성들과 줄 공유 크기 조절 불가능 span 등이 있다. • block - 기본 100%차지, 블록요소가 아닌 얘들한테 주는 기능 크키 조절 가능 (top,left 등) div 등이 있다. • inline-block - 기본적으로 인라인처럼 글자만큼 공간 차지하고, 공간을 키울 수 있음 • none : 크기를 차지하지 않는다. 크기조차 사라진다. (창이 점점 줄어들면서, 어떤요소가 사라지는데 크기 차지 x, 보이지 않게 할때 쓴다.) • flex - 웹문서의 정렬, 레이아웃을 쉽게 구..

앞에서 간단하게 인라인, 블록 요소, 선택자를 배운적이 있다. CSS의 우선순위 CSS는 기본적으로 위아래로 순차적으로 읽지만, • 동일한 요소를 다른 선택자로 적용해 여러 스타일이 적용되는 난감한 상황 이 발생하기도 함. • CSS 파일이 여러 개라면 더욱 난감해짐 *외우긴 힘듬, 자주봐라 * !important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 >태그 선택자 > 전체선택자 레이아웃을 위한 첫번쨰 Position과 transform에 대해서 알아보자. Position 웹 문서 안 요소들을 배치할 때, 텍스트나 이미지 원하는 곳에 배치할 때 사용 1) static : 정적 위치 지정 방식 기본 위치에 존재하는 속성값 (div같은 경우 왼쪽 상단부터), 위치 지정불가(top,..

HTML이 명사, CSS가 형용사, JS가 동사 CSS 웹문서에 쓰일 글자의 크기, 특정 태그의 색 등 서식과 관련된 내용들을 관리 CSS가 없다면? CSS 참조 방식 외부 스타일 시트 ( External Style Sheet ) css 확장자를 가진 스타일 시트 파일 생성 html 문서에 연결해 사용 예)공통 적용 할 때, 3개의 파일에 똑같은 빨강을 입힐 때 내부 스타일 시트 ( Internal Style Sheet ) 공유할 필요 없고, 이파일에만 저장할 때 HTML 문서 내에서 태그 내부에 html 오렌지 사과 파인애플 수박 왕수박 덜익은수박 씨없는수박 .ss p:nth-child(1) {background-color: rgba(255, 180, 130, 0.272);} .ss p:nth-of-t..