CSS

CSS

• CSS: HTML과는 완전히 다른 컴퓨터 언어

  • HTML은 정보에 전념하기 위해 HTML에서 디자인에 대한 기능은 CSS가 뺏어온 것
  • HTML을 통해 디자인을 하는 것보다 훨씬 효율적

• <font color="red"></font> ( 폰트 색깔을 바꿔줌) -> 여러개의 a태그가 있을 시 모두 다 색깔을 바꾸기가 어려움

• <!-- --> 이 태그 안에 있는 코드들은 주석 처리

• <style> </style> (속성)

  • 이 태그 안 쪽에 있는 코드들은 CSS로 처리하게 해줌
  • 만약 모든 리스트 중 한 가지의 코드만 색깔을 다르게 지정하고 싶을 경우 코드 내에서 style="color: red" 라고 코드의 a태그 내에 적어줌
  • style=""이라는 문법 자체는 HTML의 속성 그( 속성에 대한 약속이 그 값으 반드시 CSS의 효과가 들어오는 것)
  • style이라는 속성만으로는 누구에게 이 효과를 지정할 지 설명할 수 없기 때문에 a{}등의 코드가 추가적으로 필요

• a{} (선택자)-> 웹 페이지에 있는 모든 a 태그에 대해서 CSS로 지배하는 태그 (우리가 주고싶은 효과를 누구에게 줄 것인지 선택하기 때문에 선택자)

  • 모든 h1태그내 일 경우, h1{}

• 효과,선언,declaration( a 태그 내에 적음 -선택자에게 지정될 효과)

  • property: value; 로 이루어짐
    • color: pink; : 색깔을 pink로 적용
    • text-decoration: none; : 밑줄이 사라짐
    • text-decoration: underline; : 밑줄이 생김
    • font-size: 60px; : 60px로 글씨 크기 조정
    • text-align: center; : 글씨 위치 배열
  • 구글링을 하고 싶을 경우 css~~ property 로 어떤 속성 태그인지 알아내면 됨
  • 이 declaration은 style 태그를 직접 코드 내에 사용할 경우, 저 style 태그가 위치하고 있는 태그에게 효과를 줄 것이기 때문에 선택자를 사용할 필요가 없음
  • ;을 통해서 하나의 코드를 구분시켜주는 역할

• class="" -> 코드 내에 원하는 이름의 class로 그룹화시킴 (그룹화시킨 class이름을 선택자로 사용해서 원하는 효과를 줄 수 있음)

  • class 이름이 saw일 경우, style 태그 내에 .saw가 class가 saw인 태그를 가리키는 선택자가 됨(.을 앞에 붙여줘야 함)
  • class의 속성은 여러개가 들어올 수 있고, 띄어쓰기로 구분시켜줌
    ex) class="saw active" (하나의 태그에는 여러 개의 속성이 들어올 수 있고 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.)
  • 다른 그룹에서 같은 속성에 대한 명령을 내린다면 더 밑(최근) 에 있는 효과가 적용
  • 태그 내에 id="active"라고 적고 style 태그내에 #active를 선택자로 사용한다면, 앞에 썼어도 우선순위 적용됨
  • 우선순위: id(#.active)선택자 > class(.active) 선택자 > 태그 선택자(a,h1)
  • (id의 값은 단 한번만 등장해야 함 (중복 x) 유일무이한 값 더 구체적인 id가 포괄적인 태그 선택자보다 우선순위를 둠

• /* */ -> 주석 표시

• -CSS 박스 모델

• block level element : 화면 전체를 쓰는 태그들 ex) h1

• inline element: 자기 자신의 부피, 콘텐츠 크기만큼을 갖는 태그들 ex) a

  • block element 여도 태그내에 display: inline; 이라고 쓰면 inline 으로 사용 가능( inline을 block으로 사용하는 것도 마찬가지)

• display: none : 태그들을 안보이게 해서 화면에서 사라짐

• box 꾸미기

  • border-width:5px;

  • border-color:red;

  • border-style:solid;

  • border: 5px solid red;로 중복 제거 가능 (순서는 중요하지 않음)

  • 같은 내용의 속성들이라면 한 번에 묶어서 표시 가능 ex) h1, a{}

  • padding: 20px; : 콘텐츠와 테두리 사이 여백을 줌

  • margin: 0; : 테두리와 테두리 사이의 간격이 없어짐 (value가 양수이면 그만큼 간격이 생김)

  • width: 100px; : 박스 크기 지정 ( block element 경우, display: box;라는 속성이 생략되어 있는 것이므로 width를 통해 박스 크기를 지정 가능

  • border-bottom: 박스가 아닌 밑줄 형식 (지정 방법은 border과 같음 )

  • 웹에서 오른쪽 마우스 클릭 후, 검사를 들어가서 디자인하고 싶은 부분이 어딘지 알아보면서 margin,padding등을 지정해주면 됨

  • border-right: 세로줄 형식

• caniuse.com: 기술들 중 현재 웹브라우저들이 얼마나 그 기술을 사용하는지 통계

• 그리드 : 목록과 본문이 나란히 위치하는 디자인( 최근 등장 기술)

  • display: grid;
  • grid-template-columns: 나란하게 배열해줌 150px 1fr(첫 번째 요소는 150px , 두 번째 요소는 나머지 공간에 할당);

• <div> </div> : 디자인을 하기 위해서 사용하는 어떤 의미도 존재하지 않는 태그( block level element)

• <span></span> : 디자인을 하기 위해서 사용하는 어떤 의미도 존재하지 않는 태그(inline level element)

  • 두 개 이상의 태그를 나란히 혹은 어떤 배치하고 싶다면 그것을 감싸는 부모 태그가 필요
  • 많은 ol태그 중 부모 태그에 포함된 ol만 스타일 하고 싶다면 #grid ol (부모 div태그 id가 grid인 경우임)

• 반응형 디자인 : 화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 동작하게 된다

• 미디어 쿼리 : 반응형 디자인을 CSS를 통해 구현하는 핵심적인 개념 @media(min-width:800px){div{display:none;}}

  • 최소 800 ,즉 800보다 화면이 크면 아래 조건 적용돼서 div 태그들 사라짐
  • 화면 크기 작아짐에 따라 나열된 것 밑으로 내리고 싶다면 grid 태그 display:block; 로 바꿔줌
  • 중복되는 스타일 태그들을 제거시키기-> link 이용 ex) <link rel="stylesheet" href="style.css> (웹브라우저는 style.css 파일을 다운받아서 그것을 웹페이지에 적용)-> 모든 링크에 대해 똑같은 스타일 적용되므로 디자인 변경하기 용이

• 캐싱: 저장, 한 번 다운받았다면 저장된 결과를 가져오기 때문에 트래픽 훨씬 적음