생활코딩_WEB2_CSS

HTML, CSS, JavaScript 기술 중 현재 사용하는 기술의 통계보는 사이트

---

CSS

• 웹페이지를 아름답게 만드는 방법
• 즉, 꾸미기
• 모든 a 태그는 style 안에 그냥 a 적으면 됨
• 중복된 코드를 단 하나의 코드로 가능 (중복의 제거)
• 디자인에 효과적
• 삽입 방법
  1. sytle태그 사용
  2. sytle속성 사용

기본문법

1. text-decoration: none;
   • style태그에 쓰면 해당태그의 밑줄 등 모든 효과 사라짐
   • style속성으로 해당 텍스트 태그 안에 적으면 해당 텍스트에만 효과
2. font-size: ~px;
   • 텍스트 크기
3. text-align: center;
   • 텍스트 정렬
4. class는 style태그 안에 적을 때 앞에 .을 꼭 붙혀준다.
5. class 이름은 뒤에 띄어서 덧붙히기 가능
6. class 간에는 나중에 한 명령이 더 큰 영향력
7. 우선순위 높은 것 : ID
8. ID는 .이 아닌 #을 붙힌다.
9. ID > class > tag
10. ID값은 단 한번만 등장해야 함, 동일한 ID값 안됨

BOX MODEL

• HTML 태그 하나하나를 일종의 박스로 취급하여 부피감 결정
• 화면 전체를 쓰는 태그 : block level element
• 자신의 부피만큼만 쓰는 태그 : inline element
• block이나 inline 같은 것은 display로 변경 가능
• 사라지게 하는 것은 display: none;
• 폭 : width, 높이 : height
• 내부 : padding, 외부 : margin
• 선 : border
• 중복 NO! 아래와 같이 콤마로 같이 쓰는 것, 한번에 같이 쓰는 것 모두 가능

<style>
  h1, a {
  border-width: 5px;
  border-color: red;
  border-style: solid;
  }
</style>

<style>
	h1, a {
		border: 5px solid red;
	}
</style>

---

1. 밑줄 or 세로줄은 테두리로!

<style>
border-bottom: 1px solid gray;
</style>

<style>
border-right: 1px solid gray;
</style>

2. 밑줄과 글자 사이 간격은 margin, padding 으로!

GRID

• 두 방향(가로-세로) 레이아웃 시스템 (2차원)
  cf. 한 방향 레이아웃 시스템 (1차원)
• 의미가 없는 태그 : div (block level element)
  cf. span (inline element)
• block, inline 필요에 따라 div or span 사용
• 그리드 사용하여 2개를 나란히 놓으려면 2태그를 감싸는 부모태그 필요 (div 사용)
• display: grid;
• grid-template-columns: 첫번째 태그 크기 두번째 태그 크기;
• display 와 grid-template-columns는 부모태그에!
• fr : 화면 전체를 사용하게 자동으로 조정되는 단위
  • ex. 2fr 1fr;
    • 전체 화면을 3등분 했을 때 1번 태그는 화면의 ⅔만큼 2번 태그는 화면의 ⅓만큼 사용한다는 뜻
    • 1fr 1fr; 이라면 둘 다 화면의 ½만큼 쓴다는 뜻
• 어느 한쪽의 태그 텍스트가 많아도 1번, 2번 태그 모두 자동으로 크기가 커짐
• #id tag : 해당 id에 속해 있는 tag
• chrome 개발자 도구를 보면서 padding값, margin값 등 체크하면서 하기

반응형 디자인 & 미디어 쿼리

• 반응형 디자인
  • 화면의 크기에 따라 웹페이지 각 요소들이 반응해서 동작
• 미디어 쿼리
  • CSS를 통해서 구현하는 핵심적인 개념
• 생김새
  • max-width: 800px(=screen width < 800px) : width가 800px보다 작을 때
  • min-width: 800px(=screen width > 800px) : width가 800px보다 클 때

<style>
  @media (max-width: 800px) {
  	div {
  		display: none;
  	}
  }
</style>

• 개발자 도구로 봐가면서 확인
• 아래 id, class, tag는 style에서 지정했던 것 그대로 가져와서 수정

CSS 코드의 재사용

• CSS파일로 저장

<link rel="stylesheet" href="style파일명.css">

• 캐싱 : 저장하다 라는 뜻
• 캐시로 인해 css파일을 캐싱하게 된다면 웹페이지를 훨씬 빠르게 볼 수 있음
• 네트워크 트래픽 또한 감소

---

코딩장면만을 담은 버전의 영상