개발/CSS 썸네일형 리스트형 [CSS] css font / font-family / 포괄적 폰트 지정 / font-weight / line-height font - font의 형태 폰트지정 : 폰트 지정에서는 첫번째에 지정되어있는 폰트가 없을시 두번째, 세번째로 지정이 된다 포괄적인 폰트지정 : 포괄적인 폰트 지정은 서체의 종류를 지정하는 것이다. 서체의 종류는 총 5가지가 있다. - 포괄적인 폰트지정 종류 설명 example serif 글씨에 꺽쇠가 붙어져 있는 서체 sans-serif sans는 없음을 뜻하고 국내에선 고딕체와 같은 것이 이에 해당된다. cursive 필기체 같은 형태이다. fantasy 일반적 서체가 아닌 개성이 있고 장식성이 많은 서체이다. monospace 고정폭 서체이다 모든 글씨의 폭을 동일하게 만들어준다. 각각의 서체의 종류를 실행해 보았다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .. 더보기 [CSS] CSS font-size / em과 rem의 차이 / color / text-align 1. font-size 단위 설명 중요도 rem 사용자가 크기를 결정할 수 있는 font-size 상 px 고정된 값 사용자가 임의로 변경 불가능 중 em 부모 태그의 영향을 받기 때문에 파악 어려움 지금은 잘 사용하지 않음 하 rem은 html 태그에 적용된 font-size에 영향을 받는다 따라서 화면의 크기에 따라 상대적으로 크기가 결정된다. px는 고정된 값이라 화면의 크기에 영향을 받지 않고 가장 많이 사용하는 단위이다. + em과 rem의 차이점 em은 자신보다 상위 태그에 font-size가 존재할 경우 파악이 어렵다 rem은 html 태그에 존재하는 기본 값을 그대로 이어받기 때문에 파악이 쉬운편이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2.. 더보기 [CSS] CSS font-size / em과 rem의 차이 / color / text-align 1. font-size 단위 설명 중요도 rem 사용자가 크기를 결정할 수 있는 font-size 상 px 고정된 값 사용자가 임의로 변경 불가능 중 em 부모 태그의 영향을 받기 때문에 파악 어려움 지금은 잘 사용하지 않음 하 rem은 html 태그에 적용된 font-size에 영향을 받는다 따라서 화면의 크기에 따라 상대적으로 크기가 결정된다. px는 고정된 값이라 화면의 크기에 영향을 받지 않고 가장 많이 사용하는 단위이다. + em과 rem의 차이점 em은 자신보다 상위 태그에 font-size가 존재할 경우 파악이 어렵다 rem은 html 태그에 존재하는 기본 값을 그대로 이어받기 때문에 파악이 쉬운편이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2.. 더보기 [CSS] Reset CSS 사용하기 / reset css 란? / 자주 사용되는 css reset Reset CSS 란? - 모든 웹 브라우저는 디폴트 스타일을 가지고 있어 CSS가 없이도 작동함. 대표적인 브라우저 IE Firefox Chrome Safari Opera - 웹브라우저에 따라 디폴트 스타일이 상이하고 지원하는 tag나 style도 제각각이어서 주의가 필요. 브라우저는 모두 같은 기본값을 사용하지 않는다 margin, padding을 적용했을때 브라우저마다 보이는 방식디 다르다. 들여쓰기 거리, line height의 폭, heading 크기이 기본값도 다르다. - Reset CSS는 기본적인 HTML 요소의 CSS를 초기화 하는 용도로 사용 (디폴트 스타일을 하나로 통일시켜 주는 역할) 초기화 하는 reset.css파일을 별도로 만들어 저장해 놓고 태그 작성을 시작하면된다. reset.. 더보기 [CSS] HTML과 CSS의 연동 (Link style / Embedding style / inline style ) HTML과 CSS의 연동 - HTML은 CSS를 포함할수 있다. - CSS를 가지고 있지 않은 HTML은 브라우저에서 기본으로 적용하는 CSS(user agent stylesheet)에 의해 렌더링 된다. - CSS와 HTML을 연동하는 방법 ① Link style (HTML에서 외부에 있는 CSS 파일을 로드하는 방식) Link style HTML CSS 안뇽 세상아~ 이것은 웹 페이지다이 h1 { color: red; } p { background: blue; } ② Embedding style - HTML 내부에 CSS를 포함시키는 방식. - 간단한 웹페이지의 경우 문제될것이 없지만 Link style을 사용하는것이 좋다. - HTML과 CSS는 서로 역할이 다르니 구분되어 작성하고 관리되는것이 바.. 더보기 [CSS3] Css Rule / CSS Rule set / CSS Selector [CSS3] Css Rule / CSS Rule set / CSS Selector [CSS3] Css Rule / CSS Rule set / CSS Selector CSS3 Seclctor - HTML는 정보에 대한 것만 제공하고 CSS는 스타일에 대한 정보를 제공한다. 이 두가지의 역할을 분배함으로써 HTML은 정보, CSS는 스타일만 제공할수 있게 하였다. - CSS3 Selector는 스타일을 적용하고자 하는 HTML의 요소를 선택하기 위해 CSS에서 제공하는 수단이다. CSS3 의 Rule set - 위와 같은 Rule Set의 집합을 스타일시트(Style Sheet)라 한다. - 셀렉터에 의해 특정 HTML 요소를 어떻게 Rendering할 것인지 브라우저에 지시하는 역할을 한다. 1.셀렉터 (.. 더보기 [CSS] CSS(Cascading Style Sheets)란? / CSS Rule Set CSS(Cascading Style Sheets)란? - HTML, XML과 같은 구조화 된 문서(Document)를 화면, 종이에 어떻게 렌더링할것인지 정의하기 위한 언어 - HTML의 각 요소(Element)의 style(design, layout etc)을 정의해 화면에 어떻게 렌더링 하면 되는지 브라우저에게 설명하기 위한 언어 HTML5 이전버전과 현 버전의 차이 HTML5 이전버전 HTML5 - HTML에는 style을 컨트롤할 수 있는 태그(font, center)가 존재하여 CSS가 없이도 어느정도의 스타일 표현 가능했음. - 정보와 구조를 담당하는 HTML의 본연의 역할과 동떨어진 기능까지 추가해 복잡하고 혼란스러운 언어였음. HTML : 정보, 구조화 CSS : stylying의 정의 본.. 더보기 이전 1 다음
