Language/CSS9 [폰트] 나만의 글꼴 적용하기 : @font-face @font-face 웹 폰트방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트예시{ font-family: Nanum Gothic; }- 웹 폰트 사용 X : 나눔고딕 폰트가 설치되지 않은 pc에서는 기본 폰트인 돋움 글꼴이 노출 나눔고딕 폰트가 설치된 pc에서는 나눔고딕 폰트가 노출. - 웹 폰트 사용 O : 방문자의 pc에 나눔고딕 폰트가 있든 없든 나눔고딕 폰트가 노출주요특징1. 최근 모든 브라우저들은 웹 폰트를 지원하고 있다2. 웹사이트 서버에 폰트를 직접 업로드하거나 서드파티 서비스(구글웹폰트 등)을 사용할 수 있다@font-face란?- CSS 표준의 일부로 웹 폰트를 정의할 때 사용하는 규칙- 서버.. 2023. 6. 9. [실습] 레이아웃 : 홈페이지, 검색, 로그인, 메뉴바 레이아웃 실습홈페이지에 쓰일 기본골격을 만들어보자 1) 영역나누기 바디부(HTML) 헤드부(CSS) 2) footer만들기 바디부(HTML) 이용약관 | 개인정보취급방침 | 인재채용 | 고객센터 · 상호명 : GooDee Academy .. 2022. 12. 12. [실습] 영역 나누기 / display, margin, float 영역 나누기div안에 div를 넣는 방식으로 나눈다. 사용될 스타일들display- 요소의 레이아웃 방식과 다른 요소와의 관계를 정의한다.block : 요소가 블록 레벨로 표시 (줄 전체를 차지하며, 다음 요소는 새 줄에서 시작)inline : 요소가 인라인 레벨로 표시 (요소가 줄의 한 부분에만 차지하며, 다른 인라인 요소와 나란히 배치될 수 있음)inline-block : 인라인 요소처럼 나란히 배치되지만, 블록 요소처럼 width, height 값을 지정할 수 있다.flex : 요소를 플렉스 컨테이너로 지정 (내부 요소들이 플렉스 아이템으로 배치된다) * 연관포스팅 : 97번 포스팅grid : 요소를 그리드 컨테이너로 지정 (내부 요소들이 격자 형태로 배치된다).. 2022. 12. 12. [스타일] 변형 관련 CSS Style : 변형 관련 속성{ transform : translate...(...) / scale...(...) / rotate(...) / skew...(...) ; }웹요소의 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 속성유효 속성값 : ▶translateX(px) - 좌우로 움직이기- 입력값이 (+)면 오른쪽, (-)면 왼쪽으로 움직임▶translateY(px) - 상하로 움직이기- 입력값이 (+)면 위쪽, (-)면 아래쪽으로 움직임▶translate(px, px) - 대각선으로 움직이기- x값, y값을 동시에 입력함으로써 대각선으로 움직이게 함▶scaleX(n) - 가로로 확대 또는 축소- n배만큼 확대되며, 음수값입력시 좌우반전하며 확대축소▶scaleY(n) .. 2022. 12. 12. [스타일] 배경 / 레이아웃 관련 CSS Style : 배경 관련 속성 { background-color : 색상값 ; }배경색을 지정한다. { background-clip : border-box / padding-box / content-box ; }배경의 범위를 지정할 때 사용유효 속성값 ▶border-box : default. 테투리까지 배경으로 지정한다.▶padding-box : padding까지를 배경으로 지정한다.▶content-box : content까지를 배경으로 지정한다. { background-image : url ( "..." ) ; }배경으로 이미지를 지정한다.background-size, background-position, background-attachment와 함께 쓸 수 있다. .. 2022. 12. 12. [스타일] 영역 / 테두리 관련 영역 이란?요소의 영역 = content(내용물) + padding(여백) + border(테두리) 요소 및 margin의 영역 확인하기 : 브라우저에서 F12 > 중간에 있는 탭 중 computed에서 확인할 수 있다.px 단위로 margin, border, padding, content 크기 표기되어있음 CSS Style : 테두리 관련 속성테두리(border)는 요소에 속한다. { border-width : 크기px ; }테두리의 두께를 지정한다.4개의 값을 띄워쓰기로 구분하여 입력시 사면을 시계방향으로 나열한 [상, 우, 하, 좌] 의 값이 된다.3개의 값을 띄워쓰기로 구분하여 입력시 [상, 좌우, 하] 의 값이 된다.2개의 값을 띄워쓰기로 구분하여 입력시 [상하, 좌우] 의 값이 된.. 2022. 12. 12. [스타일] 글꼴 / 텍스트 / 목록 관련 CSS Style : 글꼴 관련 속성{ font-family : 글꼴명, 글꼴명, ... ; }글꼴을 지정한다.글꼴명은 그대로 써도 되나, 공백이 있다면 반드시 "따옴표" 혹은 '홑따옴표' 로 감싸야 한다.앞에 기재된 글꼴일수록 먼저 지정되며, 해당 폰트를 사용할 수 없는 환경에서 다음 폰트가 지정된다.외부 웹폰트 사용하는 방법1. http://www.fonts.google.com 에서 원하는 글꼴의 상세페이지에서 (+)를 눌러 바구니에 담는다.2. 우상단의 View Selected families 아이콘을 클릭하여 link태그 복사해서 헤드부에 붙인다. { font-size : X px / X em / X % ; }글자의 크기를 지정하며 3가지의 단위가 올 수 있다.px : 고정크기... 2022. 12. 12. [문법] 선택자 selector / 선택자 우선순위 선택자 selector스타일을 부여할 때 원하는 html요소를 특정해주는 기능. 선택자 종류전체 선택자 * {...} - 현재 문서상의 태그들을 다 선택하고자 할 때 사용태그 선택자 태그명 {...} - h1, p, li 등등 특정 태그에 전체적용하고자 할때 사용아이디 선택자 #아이디 {...} - 특정 html 요소 하나만을 선택하고자 할때, 해당 요소에 id 속성을 부여한 후 사용- javascript의 DOM에서 id값으로 페이지 요소를 가져오기 때문에 id는 중복사용해선 안된다클래스 속성자 . 클래스명 {...} - 여러개의 요소를 선택하고자 할 때, 해당 요소들에 class 속성을 부여한 후 사용- 하나의 태그는 class 속성값으로 공백으로 구분된 여러개의 클래스를 기재할 .. 2022. 12. 11. [개요] CSS 란, 적용 방식, link태그 CSS 개요웹페이지 구성문서 내용 작성과 꾸미는 부분이 분리되어 있다 >> 내용을 수정해도 디자인을 바꿀 필요가 없고 디자인을 수정해도 글 내용을 바꿀 필요가 없다.다양한 기기에도 디자인만 따로 적용하여 구동시킬 수 있음 CSS 란?Cascading Style Sheets. HTML로 작성된 웹 문서를 꾸미기 위한 기법CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정한다. 기본형식선택자를 먼저 기술 한 뒤 { }안에 스타일들을 ;로 구분하여 입력한다. 대입은 : 를 사용한다. CSS 적용 방식인라인 스타일 시트 : 태그 내부에 스타일 정보를 저정하는 방법. 선택자가 필요없다.style = " 스타일속성 : 속성값; " 의 형태로 입력내부 스타일 시트 : 헤드부에 태.. 2022. 12. 11. 이전 1 다음
