0804 TIL

15680 단어 TILCSShtmlCSS

🪴In To Programming

차례
1. TIL 내용 (CSS, html)
2. 퀴즈 내용 (틀린, 몰랐던, 헷갈렸던 부분 위주로 개념 정리)



🌱 CSS, HTML

  • 태그
    태그는 앞 뒤가 <> 이렇게 생긴 것
  • 요소
    요소는 태그 앞뒤가 다 잘 닫힌 하나의 덩어리를 말한다.
  • content
    태그와 태그 사이의 부분을 컨텐트라 한다.
// 태그 : <tag>, </tag>
// 요소 : <tag>요소입니다.</tag>
// content : 위의 '요소입니다.' 부분이 컨텐트에 해당.

  • 부모 / 자식 요소의 관계
    해당 관계는 상대적이다.

    • 후손(자손, 하위) 요소
      자식의 자식 ... 태그 => 자식 이하 요소
      요소끼리의 부모/자식, 상위/하위 개념은 CSS 구조 파악할 때 중요하다!!


  • 태그의 종류

    • P : 문단
    • h1 : 제목
    • img
      • 이미지 태그 (src, alt)
      • 빈 태그에 해당(</>, <> 이런 식으로 닫는 태그 2개가 아닌 태그 1개로 구성되어 있는 태그)
      • 빈 태그의 경우,
        속성, 값 이 빈 태그에 대부분 포함된다.
        => 열고 닫는 형식의 태그가 X
        => 컨텐트 내용이 X 때문에 속성, 값이 중요하다.
    • div : 아무 의미 X, 분할 용도로 많이 쓰인다.

  • class
    "별명" 이라 볼 수 있다.



index.html 파일

<!DOCTYPE html>
<html lang="en">
  <head>  <!-- 문서의 정보, 웹페이지에 표시되지 않음 -->
    <!-- meta : 정보, 빈 태그 -->
    <meta charset="UTF-8" />
    <!-- name 속성 : 정보의 종류 / content 속성 : 정보 값 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- title : 웹페이지의 제목, 웹페이지 탭에 출력. -->
    <title>Document</title>
    
    <!--<link rel="현재 문서-외부 문서의 관계" href="외부문서위치(경로)"/>-->
    <link rel="stylesheet" href="./main.css"/>
    
    <style></style>
    
  </head>
  <body>  <!-- 문서의 구조, 실제로 출력되는 부분 = 웹페이지에 보이는 부분 -->
    <div></div>
    <h1></h1>
    <section></section>
    <ol></ol>
    <ul></ul>
      <li></li>
  </body>
</html>

  • head 태그

    • title 태그

    • link 태그

      • rel="stylesheet" -> css란 뜻
      • link 태그의 rel 속성 꼭 필요!!
        href 속성은 없어도 괜찮지만 rel 속성은 꼭!! 있어야 한다.
      • href="./main.css" -> ./
        현재 경로에서 파일 찾겠다는 뜻!!

    • script 태그
      JS 작성

      • 외부 JS 문서 불러오거나, 스크립트 태그 내에 JS 코드 작성 둘 다 가능!
      • 속성으로 src 갖는다. 파일 경로를 값으로 갖는다.
      • 빈 태그 아님!

    • style 태그

      • head 태그 내
        1. link 태그로 불러오기
        2. style 태그 내에서 작성
      • body 태그 내
        1. 해당 태그에 속성="값"으로 작성
        <div style="color : red;"></div>

  • body 태그

    • div 태그
      분할 용도로 쓰인다.

  • img 태그
    속성 총 2개, src, alt 속성 필수!!!

    1. src : 경로
    2. alt : 사진 로딩이 잘 안 될 시, 대체 텍스트



  • emmet 문법
    ! + tab : html 파일 기본셋업이 된다.
    img + tab : img 태그 생성.
    div + tab : div 태그 생성.



CSS

선택자 {
  속성: 값;
  속성: 값;
}

/* 태그 CSS */
body {
  margin: 0px;
  padding: 0px;
}

/* id CSS */
#id {
  margin: 0px;
  padding: 0px;
}

/* class CSS */
.class {
  margin: 0px;
  padding: 0px;
}
  • 선택자
    태그, id, class 가 온다.

속성

  • margin
    바깥 여백
    요소와 요소 사이에 거리 만들 때 주로 사용
  • padding
    안쪽 여백 (원본 사이즈보다 커진다)
  • position
    위치 부모 요소 기준으로
  • width
    가로 너비
  • height
    세로 너비
  • color
    글자 색상
  • background / background-color
    배경색
    단축 속성
  • float
    요소를 띄우는 특성
    => 요소를 띄우면서 수평으로 만든다.
    (수평으로 만드는 속성이 X!!,
    이걸 사용하면 특정 요소를 수평으로 만들 수 있다.)
 .menu-item {
  float: left; /* 이런 식으로 사용!*/
  padding: 8px 10px;
}

  • 개별 속성 / 단축 속성
    • 개별 속성
      top, right, bottom, left 각각의 속성을 말한다.
    • 단축 속성
      개별 속성을 다 아우른다. (위아래양옆 동일하게 적용)

  • margin, padding 기본 설정
    기본으로 npx씩 설정되어 있기 때문에
    없애주려면 밑과 같이 0px 설정하면 된다.
body {
  margin: 0px;
  padding: 0px;
}

  • auto : 기본 속성 값

  • div
    css에서 div 태그는 위->아래 = 수직으로 쌓인다.

  • CSS 작성 순서는 html 구조대로 하는 것이 유지/보수하기 편리하다!!

  • "A라는 class의 하위 요소에 있는 B 태그에 CSS 적용시켜보자!"

/* B태그는 A 클래스 하위 요소니까 .A 뒤에 띄어쓰기 후 B 작성한다.*/

.클래스이름 태그이름 {
  width: 32px;
  height: 32px;
}

.A B {
  width: 32px;
  height: 32px;
}

  • 위/아래 좌/우
/* 위/아래 좌/우*/
body {
  /* margin이 위/아래 8px, 좌/우 10px 적용됐다. 는 뜻 */
  margin: 8px 10px;
}

  • CSS 부모 / 자식 관계

    • 자식 태그에 여백을 주면 부모 태그도 넓어진다.
      => 부모 태그가 자식 태그를 포함하기 때문

    • 부모 태그에 CSS 적용하면 자식 태그에도 적용된다!
      => "부모에 적용시 자식에도 적용되니 부모에 CSS 적용하자!" 는 별로 좋은 방법이 아니다.
      해당 자식 태그에만! 적용되는 CSS라면 해당 태그에 CSS 적용하자!






🌱 퀴즈

  • 헷갈렸던 선지

    1. else if는 그 자체로 한 개의 키워드이다. (else if가 한 묶음이다.)
      => X
      else if는 그 자체로 한 개의 키워드가 아닌 else, if 각각이 따로따로다.

    2. for문은 특정 조건에서 반복을 그만하는 방식으로 작성하고 while은 조건에 해당하는 변수가 특정 구간만큼 증가하는 방식으로 작성한다.
      => O


  • 틀린 부분

    1. Git Staging Area
      작업을 마친 시점의 파일들이 커밋을 준비하고 있는 장소이다.
      => tracked & staged 상태
      add 명령어를 통해 파일을 Staging Area에 올릴 수 있다.

    2. JS 식별자 네이밍 규칙

      • 특수문자를 제외 문자,숫자, _, $ 포함 가능.
      • 특수문자를 제외한 문자, _, $로 시작해야 함.
        숫자로 시작 X
      • 예약어는 식별자로 사용 X.

  • 문제 풀면서 몰랐던 내용
    (학습하지 않은 부분이라 학습 후에 해당 문제 다시 풀어 볼 계획! 다시 풀어보고 정리해야지)

    1. 객체 생성자
    2. 태그의 block 요소와 inline 요소
    3. 최소 작업 우선 스케줄링 (SJF)
JavaScript Stack & Queue
월간 코드 챌린지 시즌1- 두 개 뽑아서 더하기[level 1]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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