TIL #7 - HTML&CSS

rosarang·2021년 1월 11일
0

HTML

목록 보기
5/6
post-thumbnail

모바일 화면을 위한 meta 태그

<meta name="viewport" content="width=device-width">

디바이스의 가로 크기 = 웹 페이지의 가로
모바일에서 웹사이트가 잘 나오기 위해 추가해야하는 정보. 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 나옴.

span / p / div

span - inline tag
p - block tag
div - 비슷한 부분을 그룹하거나 디자인에 맞게 레이아웃 분리, 또는 class나 id 부여를 위한 태그

img 태그 사이즈 단위

html에서 img 태그의 width나 height 입력 시 px 단위 생략함. 속성의 단위가 px

CSS 폰트

font-family 문법

  1. 띄어쓰기가 있는 폰트명은 ""로 묶어주어야 함.
  2. 보통 여러 폰트 나열, 대체 폰트를 지정하기 위함. 없다면 브라우저에서 적당한 폰트 자동으로 지정.

font-weight

100-900 등의 값 지정. 400 normal, 700 bold

font-color (x)

폰트의 컬러는 font-color나 text-color가 아닌 그냥 color

span

가운데 정렬을 해도 차지하는 영역이 인라인인 경우에는 가운데 정렬되지 않음

CSS로 하는 들여쓰기

text-indent: 숫자px;

코드로 하는 띄어쓰기

&nbsp; - 태그 안에서 띄어쓰기를 원할 경우 원하는 길이만큼 중복하여 삽입

border

border: 두께 선스타일 선색깔;

어떤 순서든 결과는 같으나 전 세계적으로 약속된 규칙이므로 지켜는 것이 좋음

선 스타일 종류

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

underline

text-decoration: underline;

밑줄 치는 스타일이 있으나 커스터마이징 하기 힘들어 border-bottom으로 밑줄 치는 것을 선호함

padding+content width = width

* {
  box-sizing: border-box;
}

컨텐츠와 패딩 값이 모두 합쳐진 것이 width값이 되도록 하는 스타일

selector

태그+클래스/아이디 - 태그이자 클래스/아이디
클래스+ +태그 - 클래스 안의 해당 태그만

div .container li.first-list

li 태그인데 "first-list" 클래스인 요소에 css를 적용한다. 그런데 div 태그 내부의, "container"클래스 내부에 있는 요소에만 적용한다.

image

  • html - img 태그

    • 가로나 세로 둘 중 하나만 지정하면 비율에 맞게 알아서 조정됨
  • css - background-image

    • css에서 넣어줄 경우 이미지 사이즈는 html에서 해당 태그 만큼의 영역이기 때문에 width나 height값을 따로 입력해줘야 함
    • 값을 입력해도 원본 이미지 사이즈는 영역만큼 보여지지 않기 때문에 background-size: 100%를 추가해주어야 함

HTML

  <body>
    <img class="js-img" alt="js" src="https://www.w3schools.com/whatis/img_js.png">

    <div class="img">
      <img class="js2-img" src="https://www.w3schools.com/whatis/img_js.png" alt="JavaScript">
    </div>
  </body>

CSS

.js-img {
  width: 300px;
}

div.img {
  width: 300px;
}

.js2-img {
  width: 100%;
}






profile
UX에 관심 많은 개발 초보 Front-end Developer

0개의 댓글