본문 바로가기
웹

[html] 제목(heading) 태그와 단락(paragraph) 태그

저녕이 2025. 4. 7. 15:00
728x90
반응형

Weekly Codeit

생산성을 높여줄 유닉스 커맨드 꿀팁

생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.

유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!

머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)

넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.

내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.

Tips & Tricks: HTML 코드 편하게 입력하는 법

HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다!

이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.

코둥이 퀴즈

머신 러닝에서 유저에게 유저가 좋아하거나 구매할만할 상품을 추천해 주는 프로그램을 □□ □□□ (이)라고 부른다.

heading 태그

  • HTML에서 <h1>, <h2>, <h3> 같은 태그는 "제목(heading)" 태그라고 함
  • 말 그대로 웹페이지 안에서 제목과 부제목을 계층적으로 표현할 때 사용
  • 사용자에게 보기 편한 구조 제공
    → 제목과 내용이 명확히 구분돼서 읽기 좋음

🏷️ <h1>부터 <h6>까지

<h1> 가장 큰 제목 (Main Title) 📢 매우 큼 최상위
<h2> 큰 부제목 👍 큼 <h1>의 하위
<h3> <h2>의 하위 제목 👌 중간  
<h4> <h3>의 하위 제목 작음  
<h5> 더 작음    
<h6> 가장 작고 중요도 낮음 🔹 가장 작음  

 

 

<!DOCTYPE html> 
<html>
    <!-- head: 웹페이지에 보이지 않는 부분 --> 
    <head>
        <title>Weekly Codeit</title>
        <meta charset="utf-8">
    </head>

    <body>
        <!-- h1 : 1st 제목-->
        <h1>Weekly Codeit</h1>

        <!-- h2 : 2nd 제목-->
        <h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
        <h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
        <h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
        <h2>코둥이 퀴즈</h2>
    </body>
</html>

Paragraph 태그

  • <p>는 "paragraph", 즉 문단을 나타내는 태그
    → 텍스트를 하나의 덩어리(단락)로 표현하고 싶을 때 사용
  • HTML5에서는 브라우저가 자동으로 처리해주긴 하지만, 열었으면 꼭 </p>로 닫아주는 게 좋음

🏷️ <p>의 특징

자동 줄바꿈 <p>는 내용을 블록 단위로 만들어주기 때문에, 끝나면 자동 줄바꿈 돼요.
스타일 지정 쉬움 CSS로 문단 간격, 글자 크기 등을 꾸미기 좋아요.
본문 내용 표현에 필수 글이나 설명문을 쓸 땐 거의 무조건 사용돼요. 
<!DOCTYPE html> 
<html>
    <!-- head: 웹페이지에 보이지 않는 부분 --> 
    <head>
        <title>Weekly Codeit</title>
        <meta charset="utf-8">
    </head>

    <body>
        <!-- h1 : 1st 제목-->
        <h1>Weekly Codeit</h1>

        <!-- h2 : 2nd 제목-->
        <h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
        <p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.</p>
        <p>유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>

        <h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
        <p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.</p>
        <p>내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.</p>
        
        <h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
        <p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다!</p>
        <p>이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.</p>

        <h2>코둥이 퀴즈</h2>
        
        <p>머신 러닝에서 유저에게 유저가 좋아하거나 구매할만할 상품을 추천해 주는 프로그램을 □□ □□□ (이)라고 부른다.</p>
            
    </body>
</html>

결과 html 

Weekly Codeit

생산성을 높여줄 유닉스 커맨드 꿀팁

생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.

유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!

머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)

넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.

내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.

Tips & Tricks: HTML 코드 편하게 입력하는 법

HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다!

이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.

코둥이 퀴즈

머신 러닝에서 유저에게 유저가 좋아하거나 구매할만할 상품을 추천해 주는 프로그램을 □□ □□□ (이)라고 부른다.

728x90
반응형
저작자표시 동일조건 (새창열림)

'웹' 카테고리의 다른 글

[html] 링크 추가하기  (0) 2025.04.07
[html] <br> 태그 : 줄 바꿈  (0) 2025.04.07
[html] 한글을 지원하는 인코딩  (0) 2025.04.07
[html] head와 body  (0) 2025.04.04
[웹] 웹사이트 만들기  (0) 2025.04.04

'웹' Related Articles

티스토리툴바