본문 바로가기

Programming/CSS

(4)
DAY 84. CSS - 색상, 배경, 애니메이션 스타일 04. 색상/배경 스타일 색상 스타일 배경 스타일 background-clip 배경 크기 조절 background-position 배경 이미지 위치를 조정하는 속성이다. 수평 위치 수직 위치 background-attachment scroll : default, 배경 이미지가 움직이게 설정한다. fixed : 화면이 스크롤 되더라도 배경 이미지는 움직이지 않게 설정한다. background 배경 이미지 한 번에 설정하는 속성 선택자{background: image값 repeat값 attachment값 position값 clip값 origin값 size값;} 애니메이션 ✔️ 변형 단순히 요소가 페이지에 출력만 되는 것이 아니라 사용자의 동작에 따라 크기가 바뀌고 요소가 이동, 회전하는 것 ✔️ 애니메이션 ..
DAY 83. CSS - 레이아웃 스타일 03. 레이아웃 스타일 기본 스타일 height/width 콘텐츠가 차지하고 있는 영역의 크기를 조절할 수 있는 속성 선택자{width/height:숫자(단위) or auto(default)}; ** 상대 크기(%)를 입력하면 창 크기에 따라 변경되고, 절대 크기(px)를 입력하면 창 크기에 따른 변화가 없다. ** 실제크기 : (height/width) + padding + margin 블록/인라인 레벨 요소 블록 레벨 요소 한 줄 전체 차지하는 요소(a.k.a 박스 모델) 한 줄에 여러 요소가 올 수 없다. ( 너비가 100% ), 블록간에 겹치는 일이 없다. 자동으로 줄바꿈이된다. EX. , , , , , , , , , , 인라인 레벨 요소 한 줄에서 일부분만 차지하는 요소, 컨텐츠 영역만큼만 차지..
DAY 82. CSS - 글자, 문단, 목록 태그 02. 텍스트 스타일 CSS 단위 구성 px : 똑같은 px 사이즈여도 기기마다 크기가 다르게 보일 수 있다. pt : 1 ~ 71 point 까지 지정할 수 있다. 상대크기는 어떤 대상을 보고 상대적인 크기를 가지고 단위로 나타낸다. em : 부모의 크기를 1em으로 따진다. 1배 = 1em = 100%, 1.5배 = 1.5em = 150% 부모 요소의 크기가 기준이 된다. 상속되면서 자식에서 더 커지는 경우가 발생한다. rem : root 최상위 태그() 의 크기를 기준으로 배수된다. % : 백분율로 상위 요소에 대한 상대적인 비율을 나타낸다. 초기설정 값 100% 텍스트 스타일 font-family 폰트 글꼴 설정, 웹 문서에서 사용할 폰트를 지정한 것 실제로 사용자 pc에 해당하는 폰트가 설치가 ..
DAY 81. CSS - 선택자 01. 기초선택자 style과 stylesheet style은 정해진 속성을 입력하여 웹 페이지를 꾸미는 것 stylesheet는 웹 페이지에서 반복적으로 쓰는 style을 모아놓은 것 p{text-align:center;} CSS 적용 분류 내부 스타일 시트 내부에 스타일 정보를 지정하는 방법 스타일을 적용할 대상에 직접 태그를 표시하는 방법 부분을 실행하기 전에 읽어야 하기 때문에 태그 안에 있다. 외부 스타일 시트 부분을 실행하기 전에 읽어야 하기 때문에 태그 안에 있다. 태그를 활용해서 css 파일을 읽어와서 스타일 적용하는 방법 .css 확장자를 가지는 파일이다. 인라인 스타일 시트 태그 내부에 스타일 정보를 지정하는 방법 태그 하나에만 적용할 때 사용한다. CSS 선택자 CSS 우선순위 위에서..