web/CSS (6) 썸네일형 리스트형 css-코드 재사용(link태그) 서로 다른 페이지에 같은 style을 적용하고 싶은 경우가 있다. 이와 같은 경우 해당 style태그 전체를 복사 붙혀 넣기 하면 간단하다. 하지만 극단적으로 1000가지의 페이지에 이를 적용해야 한다면 매우 비효율적이다. 이러한 비효율을 막아줄 방법이있다. 먼저 "이름.css" 파일을 만들고 style 태그로 감싸진 내용을 해당 파일에 붙혀 넣는다. (css 파일이기 떄문에 style 태그는 포함x) 그 후 html 문서에서는 style태그와 내용들을 지우고 그 자리에 css-그리드 (div,span) 문서를 만들 때 표나 태그와 태그 사이에 선을 그어 경계를 나타내야 하는 경우가 있다. 이때 사용되는 기술이 바로 그리드이다. 우선 그리드를 설명하기 이전에 div와span 태그를 소개하겠다. 1. div 태그 div태그는 어떠한 역할도 없는 오로지 스타일링만을 위해 사용되는 태그이고 display 값이 block이다. 사용법: 내용 2. span태그 span태그는 어떠한 역할도 없는 오로지 스타일링만을 위해 사용되는 태그이고 display 값이 inline이다. 사용법: 내용 *여기서 역할이 없다는건 h1태그 처럼 제목 역할 p태그 처럼 단락 역할과 같은 것이 없다는 것이다. 3. 그리드 어떻게? 그리드는 div나 span태그로 경계를 나누고자 하는 태그들을 자식 태그로 놓는다. 그 후 div나 spa.. css-selector 1. selector란? css로 스타일링을 해줄 대상을 지정하는 선택자를 의미한다. selector는 태그,class,id 3가지로 나뉜다. 또한 같은 속성에 대해 스타일링이 적용될 경우 스타일링 우선순위는 id>class>태그이다. 밑에 class selector 예제를 참조 2. 태그 selector 태그 selector는 태그의 이름을 사용한다. selector가 선정한 태그는 해당 태그로 쓰여진 문자 모두 동일한 스타일링을 적용 받는다. 3. Class selector Class selector는 같은 스타일링을 주고 싶은 단일 태그들을 묶는 선택자이다. Class selector의 경우 .클래스 이름{ } 으로 선언하고 클래스로 묶고 싶은 태그에 css-Box 모델 1. display란? 각 선택자(태그)가 갖는 영역을 뜻한다. 예를 들어 1줄 짜리 내용을 갖는 h1태그의 경우 1줄을 통째로 자신의 영역으로 사용한다.(즉 줄 바꿈이 적용된다.) 하지만 a(링크태그)태그의 경우에는 링크를 나타내는 글자만 자신의 영역으로 사용한다. display 속성이 갖는 value는 여러 가지가 있지만 4가지만 설명하겠다. -none: 영역이 없다. -block: 한줄을 본인의 영역으로 갖는다. (ex h1태그) -inline: 내용만을 본인의 영역으로 갖는다. (ex a태그) -inline-block: inline처럼 줄바꿈은 없으나 width,height속성 margin,padding 속성의 상하 간격 지정이 가능하다. 나머지 property는 링크 참조 https://www... css- style html에서 style 키워드는 태그,속성 2가지 용도로 쓰인다. 1.태그 style태그는 html의 head 태그에서 사용되고 html 문서의 특정 태그 전체에 css의 기능을 넣어주고 싶을 때 사용한다. 예를 들어 태그로 나타내진 글자들을 파란색으로 표현 하고싶은 경우에 사용된다. 사용법: style태그 안에 을 작성해준다. *선택자(selector)의 종류는 다음 포스팅 참조. (style태그 안에 여러개의 selector 선언이 가능하며 selector 안에 여러개의 속성:value;가 가능하다. ) 코드 결과 2.속성 Body태그 안에 존재하는 태그에서 원하는 태그에 style 속성을 이용해 css기능을 넣어준다. 사용법: *태그 내용 (속성.. CSS란? 1. CSS란? 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. 즉 html과 같은 마크업 언어들로 작성된 전자 문서에 글자의 색,크기,위치등을 설정하여 전자문서를 스타일링 하는 용도로 사용된다. 2. 동작원리 css는 html 문법인 style라는 키워드로 css 문법을 사용하여 웹브라우저가 이를 웹페이지에 반영하도록 하는 것이다. html의 문법인 style 키워드는 "앞으로는 css 문법입니다."라는 것을 웹브라우저에게 알리는 역할을 한다. 즉 웹브라우저는 style 키워드를 통해 css와 html 문법을 따로 적용하여 웹 페이지에 표시한다. 이전 1 다음
