TIL. Day4 (HTML, CSS 기초)

// css 파일 연결
  <link rel="stylesheet" href="style.css">
    
// javascript 파일 연결
  <script src="index.js"></script>

HTML

HTML(HyperText Markup Language)은 웹 페이지를 위한 지배적인 마크업 언어이다.
- 마크업 언어란?
  태그 등을 이용하여 문서나 데이터의 구조를 기록하는 언어의 한 가지이다.

CSS

  .emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana"; 
// 사용하고자 하는 글꼴이 없으면 순서대로 다음 글꼴을 사용
}

.title {
  font-size: 24px;
}

단위는 크게 절대단위와 상대단위로 나눌 수 있다.

규격이 정해져 있고 각 단위들끼리 값 변환이 가능하다.

cm
mm
pt (포인트, 1pt = 1/72in)
px (픽셀, 1px = 1/96in)
- 표시 장치(모니터)에 따라서 상대적인 크기를 가진다. 저해상도 장치의 경우 1px가 픽셀(점) 하나라면, 고해상도 장치에서 1px는 여러개의 픽셀(점)이다.
in(인치, 1in = 2.54cm)
pc(파이커, 1pc = 12pt)

환경에 따라 유동적으로 바뀔 수 있는 크기를 나타내는 단위. 반응형 웹 디자인 시 주로 사용

절대적이고 확실한 크기 정하고 싶을 때: px

보통의 경우: rem

화면 너비 및 높이에 따른 상대적인 크기가 중요한 경우: vw,vh

p {
  height: 40px;
  overflow: auto; //컨텐츠가 넘치면 자동으로 스크롤
}

넘치는 컨텐츠를 무시하고 가리고 싶을 경우 hidden을 사용한다. overflow 속성은 x축과 y축을 따로 지정하는 것도 가능하다. (overflow-x, overflow-y) 이렇게 하면 한 방향으로만 스크롤이 가능하게 만들 수도 있다.

* {
  box-sizing: border-box;
}

모든 요소에 box-sizing: border-box를 적용해 너비 계산을 단순하게 할 수 있다.

querySelector 이용한 과제 - 기사 제목 바꾸기
- html에서 태그에 클래스 달아준 후, javascript에서 바꿀 부분 지정 및 변경

<h4 class="title"> 무리뉴, "손흥민과 사랑에 빠졌다"... </h4>

document.querySelector('.title').textContent="무리뉴, "김홍식과 사랑에 빠졌다"..."

<head>
<link rel="stylesheet" href="style.css">
<head/>

이 문제에 관하여(TIL. Day4 (HTML, CSS 기초)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wpdbs4419/Day-4

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다