2023.03.23 TIL

오늘의 나는 무엇을 잘했을까?

단순히 강의에서 배운 것 뿐만 아니라 외부 자료를 찾아가며 능동적으로 학습하려 했다.

오늘의 나는 무엇을 배웠을까?

• 추상화

  • 원활한 소통을 위한 표현 방식 중 하나. 모든 정보들을 전부 다 표현하기 보다 그런 복잡한 정보는 숨기고 핵심만 명확하게 표현하는 방법

    쉽게 말해 복잡한 것들을 목적에 맞게 단순화 하는 것

    프로그래밍에서도 추상화가 중요하다. 프로그래밍은 추상화의 연속이다.

• 변수
  • let 키워드를 통해 선언, 초기화는 할당 연산자(=)를 이용하여 수행.
  • 변수 사용 또한 추상화의 한 종류이다. 변수의 값을 매번 입력하여 사용하는 것보다 하나의 이름을 정해서 값은 숨기고 목적한 표현만 정확하게 하는 행위이기 때문이다.
• 함수
  • 함수 또한 프로그래밍적으로 추상화를 실현시킨 기능이다. 복잡한 내부 내용은 함수 정의부로 숨기고, 함수 이름을 명확하게 만들어 핵심만 표현할 수 있기 때문이다.
• HTML 개요
  • Hypertext: 문서들이 하이퍼링크로 서로 연결됨
  • Markup Language: 내용에 추가적인 정보를 표시(mark)하는 언어
• 링크의 상대 주소
  • 상대경로: 현재 파일의 위치를 기준으로 적은 주소
  • 절대경로: 최상위 폴더를 기준으로 적은 주소
  • 최상위 폴더는 “/”로 시작한다. → “/movies/current/movie.html”
• 페이지 안에서 특정 위치로 이동하기

  • id 프래그먼트: html요소들에 id를 부여하면, 해당 id가 url주소 맨 마지막에 #으로 연결될 수 있다. 해당 요소가 있는 곳으로 이동한다는 의미이다.

  • 이 id 프래그먼트를 이용하여 하나의 페이지 안에서 이동하는 버튼을 만드려면 a 태그의 href속성에 다음과 같이 넣으면 된다.

    <a href="#my_id">~~쪽으로이동하기</a>

• 링크 새 탭에서 열기
  • <a href=”주소” target=”_blank” /> → 새 탭에서 열기
  • <a href=”주소” target=”_self” /> →현재 창에서 열기
  • <a href=”주소” target=”my-window” /> → 열었던 창의 alias 설정 가능.
• 다양한 링크 동작
  • <a href=”mailto:메일주소” /> →메일 보내는 링크
  • <a href=”tel:전화번호” /> →전화 거는 링크
• ol, ul 태그 스타일링

  1. type 속성 사용

     <ol type=”a”> <!--순서가 번호가 아니라 알파벳으로 나타남 -->
     	<li>...</li>
     	<li>...</li>
     	<li>...</li>
     	<li>...</li>
     </ol>

       a. …<br>
        b. …<br>
        c. …<br>

  2. css 입히기

     ul {
     	list-style: none; // disc, 등이 있다.
      
     }
     
     ul > li{
     	display: inline-block;
     	border: 1px solid black;
     	border-radius: 8px;
     	...
     }

     

• table 태그
  • thead → tbody → tfoot 태그 순으로 이루어진다.
  • 각 태그 안에는 tr → th, td 순으로 구성된다.
  • table 스타일링 스타일링을 위해 두 가지를 기억하자.
    1. 테두리 입히기 스타일링 위치

    • 전체 테두리 → table 태그에 border입히기

    • 각 셀의 테두리 → th, td에 border입히기

    • 헤더나 푸터에 적용될 테두리
      → thead th, thead td { … }

           tfoot th, tfoot td { … }

    2. 테두리 간격 조절: border-collapse, border-spacing
    • 테두리 사이의 간격을 없애보자 → table 태그에 boder-collapse: collapse; 적용, 이렇게 되면 테두리들이 겹치면서 thead, tfoot의 테두리가 우선적으로 적용된다.
    • 테두리 사이 간격 넓히기 → table 태그에 border-spacing: [n]px; 로 넓힐 수 있음
• iframe태그

  • iframe태그는 안에 html태그가 포함된 태그이다. 이렇게 한 html문서 안에서 다른 html문서를 불러올 때 사용된다.

    <iframe width="" height="" src="html파일경로" ...>

  • iframe은 지도나 결제창, 동영상, 배너 광고 등을 임베드 할 때 쓰인다.

• form태그
  • 다양한 인풋의 타입이 있음.
  • checkbox, range, date, email, password, textarea, select등
    
    
• link, script 태그
  • link
    • 외부에서 파일 가져올 때 사용
    • rel속성: 파일의 용도 지정(스타일시트, 아이콘 등)
    • href속성: 파일의 위치(경로)
    • 보통 head태그의 맨 아래쪽에 위치한다.
  • script
    • 스크립트를 실행시키기 위한 태그
    • src속성: 스크립트 파일 경로
    • 닫는 태그가 꼭 있어야 한다.
      
      
• semantic 태그

  • semantic tag란 태그 이름에 의미를 부여한 것으로, 웹 페이지의 구조 등을 나타낼 수 있는 태그이다. 한 예로 nav라는 태그가 있는데, 이 태그는 페이지의 네비게이션 바를 의마한다. 기능적으로는 div태그와 완전히 동일하지만 태그 이름이 태그속 내용을 유추할 수 있고 역할을 표현하는 등 의미가 있다고 하여 시맨틱 태그라고 부른다.

  • main

    • 말 그대로 페이지의 주된 내용을 담는 태그
    • 하나의 페이지에 딱 한 번만 사용할 수 있음

  • article

    • 하나의 완성된 내용이 독립적으로 들어가 있는 태그
    • 다른 태그들과 내용을 공유하지 않는다는 의미

  • section

    • 내용을 구분지어 나눈 태그
    • 보통 article 태그 안의 내용을 section 태그로 나눈다.

  • header, footer

    • 페이지의 상단, 하단에 나타나는 정보를 담은 태그

  • 각 태그의 의미는 구분되나 사실 div와 기능적으로는 동일하고, 엄격한 사용법이 있는것이 아니다. 그러므로 시맨틱 태그들을 사용할 때는 작성자의 의도가 중요하다는 것을 잊지 말자.

    시맨틱 태그를 사용하면 좋은 점

  • SEO: 검색엔진 봇들이 html파일을 검사하며 사이트의 내용을 정확히 파악하는 데 시맨틱 태그와 메타 태그가 사용된다.

  • 웹 접근성: 시각장애인은 화면을 볼 수 없는데, 시각 장애인들을 위해 스크린을 읽어주는 프로그램을 사용하여 웹 서핑을 한다. 이 때 시맨틱 태그를 사용한 웹사이트는 어디가 본문이고 어디가 헤더인지 구분이 가능하기 때문에 스크린리더 프로그램이 좀 더 접근성 있게 읽어줄 수 있다.

  • 개발자의 가독성: div태그가 잔뜩 있는것 보다 시맨틱 태그를 사용한 코드가 가독성과 생산성이 좋다.

오늘의 나는 어떤 어려움이 있었을까?

팀 데일리 미션으로 올라온 a태그를 가로 중앙정렬하려면 필요한 속성을 묻는 질문에 생각보다 고전했다. 해당 질문에 답을 찾아가면서, 여태까지 내가 inline-block과 margin auto를 맹목적으로 사용하고 있었다는 것을 깨달았다.

내일의 나는 무엇을 해야할까?

• Weekly mission 완성
• UI 강의 완강