공부기록/CSS11 2월 22일 (1) CSS font 글꼴처리 p 194-204 웹페이지에서 보이는 글자의 모양 처리 폰트 저작권 위반 조심하기! 내 컴퓨터에 있는 글꼴이라도 저작권이 있을 수 있어 웹 페이지 상에서 사용하면 안 된다. 폰트 설치 C:\Windows\Fonts 1. font-family : 문서에서 사용할 글꼴 지정 대 소문자는 상관없이 사용 가능 기본 폰트 Serif Sans-serif Monospace Cursive Fantasy font-family: fantasy, batang; 첫번째 폰트 우선 적용, 기본적으로 지정된 폰트가 해당되는 언어를 지원하지 않으면 두번째 폰트는 해당 되는 언어를 지원할 수 있다. font-family:'arial black', batang; 두 개 이상의 글꼴이 들어가는 경우 띄어쓰기로 표시 해 주고, .. 2023. 2. 22. 2월 21일 (2) CSS 배경, 텍스트 처리 배경처리(Background) p 293 요소의 배경 효과를 주기 위한 스타일 설정 속성 1) background-color : 배경 색상을 지정하는 속성 background-clip : 배경 범위 지정 속성 clip - background가 나오는 영역을 의미한다. 속성값 border-box : 테두리까지 배경을 지정 padding-box : 테두리를 밴 안쪽 여백까지 지정 content-box : 내용(content) 부분에만 배경 지정 주황색 선이 어디에 있는지에 따라서 달라지는 모습을 볼 수 있다. 배경 색상과 범위 2~6은 이미지와 관련된 요소를 정하는 속성 2) background-image : 배경에 이미지를 삽입(지정)하는 속성 기본적으로 반복하게 되어 있다.(패턴 또는 타일) 3) bac.. 2023. 2. 21. 2월 21일 (1) CSS 정리 + magin, border 복습! selector 기본선택자 모든 요소 * 태그명 type 선택자 : div class 주로 제일 많이 사용하는 선택자, BEM 형식으로 작명 id 유일한 값으로 사용하기 컬러 처리 방식 RGB, HEX( # 붙이기), HSL 색상이 없는 것 회색 크기, 박스모델 magin 크기에는 영향을 주지 않지만 배치에 영향을 준다. 크기 content, padding, border 계층구조 content 자식요소(하위요소) 디자인 시 오버 플로어 처리를 어떻게 할 것인지도 결정해야 한다. 기본값은 컨텐츠 박스인데 보더 박스를 더 많이 사용한다. padding 속성으로 2방향의 여백지정(위/왼쪽) padding : 10px 0 0 15px; 공백으로 차이를 둔다. 아래 두 속성은 같은 값을 가진다. paddi.. 2023. 2. 21. 2월 20일 (2) CSS 기본 선택자, box-sizing, padding Selector의 종류 1. 기본선택자 * : html 문서의 모든 요소를 선택, 보통 여백을 제거하는 용도로 사용 padding : 안쪽 여백 margin : 바깥쪽 여백 type (태그명) : 태그명으로 요소를 선택(다수 선택) . : 요소의 class 속성 값에 따라 선택, 묶어줌 다중 클래스 지정 - 한 요소에 여러 개의 class 값을 지정하여 여러 스타일을 설정 공백으로 값을 구분(형광표시) 예) # : 요소의 id 속성 값에 따라 선택, 식별자 id 속성 값은 가급적 유일한 값으로 작성할 것! html과 css에서는 같은 id를 사용해도 실행되지만, 자바스트립트에서는 id를 하나만 사용할 수 있다. 예) 전체선택자 선택자 단락 제목2 예) 클래스와 id 선택자 클래스 선택자 Lorem ips.. 2023. 2. 20. 2월 20일 (1) CSS 기초 CSS (Cascading Style Sheets 3) html 문서에 스타일을 적용하는 언어 html 요소가 어떻게 보이는 기술 한다. 웬 문서의 내용(html)과 상관없이 디자인만 바꿀 수 있다. 반응형 웹 디자인 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다. 요즘은 데스크톱보다는 스마트폰, 스마트 패드 위주 적응형 웹 디자인 데스크톱용, 모바일용 등 따로 디자인함 반응형 웹 디자인을 확인하는 방법 : 개발자 도구 F12 cascading 이란? p 186 위에서 아래로 흐른다 라는 뜻 계단식으로 적요된다. 선택자에 여러 스타일이 적용될 때 충돌을 막기 위해 우선순위에 따라 적용할 스타일을 결정 어떤 특정한 요소를 선택 - 선택한 곳에의 모양을 변경시킨다. 스타일 충돌을 막는(캐스케이딩.. 2023. 2. 20. 이전 1 2 다음
