빡공단 4일차

5007 단어 htmlhtml

[4강] 텍스트의 크기를 설정하자

  • 텍스트를 컨트롤하는 태그
  • 폼, 버튼들을 추가할 수 있는 태그
  • 로그인 창 만들기

⭐ 문자 스타일

🌕 br태그

: 줄바꿈 태그. 닫는 태그가 없다!
➰ 닫는 태그 없이 br만 넣어도 자동으로 줄바꿈이 된다.
➰ p 태그 안에서는 br 태그로 인해 줄바꿈만 발생하고, p 태그끼리는 단락이 바뀐다.

🌕 b 태그, strong 태그

: 굵은 글씨
➰ b 태그: 스타일적으로만 굵게 만들어준다. strong 태그: 의미가 있다. 제목, 강조해야 하는 부분에 쓴다.

❓ b 태그와 strong 태그를 왜 따로 구분해야 할까?

✅ 웹 접근성을 향상시키기 위해서이다.
여러 장애가 있으신 분들은 기계들의 도움을 받아 html을 해석하고 그 정보를 이해하는데, 조금 더 중요한 정보들을 strong으로 감싸주면 이 정보는 중요한 정보구나 기계가 판단해서 사용자에게 전달해줌.

🛎 시맨틱 태그: 이렇게 태그에 의미를 부여하는 것.


🌕 i 태그

: 이탤릭체를 만들어줌.
➰ 옆으로 기울어지게 만든다.


⭐ 버튼 만들기

🌕 button 태그

: 버튼 만들기!
➰ 버튼이 만들어졌다! 마우스를 올렸을 때, 클릭했을 때마다 다른 스타일을 갖게 된다.
➰ 적재적소에 버튼들을 클릭해 동적이고 생동감있는 웹 사이트를 만들 수 있다.

🌕 input 폼

: 아이디, 비밀번호 등을 입력할 때 사용하는 것.
➰ br 태그처럼 닫는 태그가 없다! input 폼을 연달아 적으면 옆에 연속으로 생성된다.
➰ input 폼에 텍스트를 입력하면 입력한 텍스트가 그대로 노출된다.


❓ 비밀번호처럼 검은 점으로 나타내고 싶으면?

🌕 type 속성

➰ input 폼에 type 속성은 password다.
➰ color: rgb 색상을 선택하게 해 주는 input의 속성
➰ date: 날짜 선택
➰ file: 파일 선택에 파일 업로드 가능
➰ 더 많은 속성을 보려면 큰따옴표 안에서 Ctrl + Space Bar 자동완성을 통해 목록을 볼 수 있다.


⭐ 로그인 창 만들기

🌕 코드

<!DOCTYPE HTML>
<html>
  <head>
    <body>
      <h1>
        로그인
      <h1>
      아이디 <input><br>
      비밀번호 <input type="password"><br>
      <button>로그인</button>
    </body>
  </head>
</html>



🍒 정리

오늘도 여러 태그들을 배웠다! 진짜 신기한 태그들이 많다. 진짜 웹 페이지 만들 때 쓰는 것을 배우니 더 흥미롭다. 저번 강의에서도 들었던 생각이지만 진짜 다른 언어들 배울 때보다 재밌는 것 같다.ㅠㅠ 이래서 비전공자들이 입문 강의로 html을 많이 듣는구나 싶었다! 나도 처음부터 빡공단에서 html을 배웠더라면 좀 더 흥미를 많이 가졌을까?

로그인 창 만드는 게 제일 신기했다. 하루에도 몇 번씩 비밀번호를 입력하는데, 항상 검정색 점으로 적히는 게 신기했는데 그게 input 태그의 속성인 type="password" 이 문장 하나로 그렇게 된다는 게 너무 신기했다! 앞으로 이렇게 신기한 게 더 나올 것을 생각하면 다음 강의가 더욱 기대된다!

오토 레이아웃의 구조
[SQL] NULL 처리하기 in programmers

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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