조코딩 기술뉴스

네이버 뉴스

 

 

IT/과학 : 네이버 뉴스

모바일, 인터넷, SNS, 통신 등 IT/과학 분야 뉴스 제공

news.naver.com

다음뉴스

 

IT

다음뉴스

news.daum.net

 

널널한 개발자

 

얄팍한 코딩사전

 

드림코딩

 

 

생활코딩

 

'개발에 필요한 자료집' 카테고리의 다른 글

CSS 자료창고  (0) 2024.03.19
현업자가 알려준 기술블로그  (0) 2024.03.10
파이썬 자료창고  (2) 2024.03.08

 

 

CSS/Properties/color/keywords - W3C Wiki

Color keywords Basic Colors Named Numeric Color name Hex rgb Decimal     black #000000 0,0,0     silver #C0C0C0 192,192,192     gray #808080 128,128,128     white #FFFFFF 255,255,255     maroon #800000 128,0,0     red #FF0000 255,0,0     pu

www.w3.org

 

'개발에 필요한 자료집' 카테고리의 다른 글

개발자 공부하는 유트브 모음  (0) 2024.03.20
현업자가 알려준 기술블로그  (0) 2024.03.10
파이썬 자료창고  (2) 2024.03.08

태그(Tag)

HTML에서 태그는 꺾쇠(< 기호랑 >) 기호를 사용하는 문법입니다.
일반적으로 시작 태그와 종료 태그로 내용을 감싸는데요, 시작 태그는 <태그 이름> 형태로 쓰고 종료
태그는 </태그 이름> 형태로 씁니다.
예시 1: <p> 태그

<p>
  단락은 이렇게 넣습니다.
</p>
예시 2: <img> 태그

<img src="https://example.com/my-image.png">

 

예시 3: `<img>` 태그를 슬래시와 함께 쓰는 경우

줄바꿈(`<br>`)이나 이미지(`<img>`)처럼 안에 내용이 없는 태그는 시작 태그만 씁니다.
참고로 마지막에 슬래시(`/`) 기호를 넣어서 하나짜리 태그라는 걸 표시하기도 하는데요. 
 슬래시 없이 태그를 사용했는데, 둘 다 올바른 HTML 문법이니까 참고로 알아 두세요!
(아래처럼 쓰는 것도 올바른 문법입니다.)
<img src="https://example.com/my-image.png" />

속성

시작 태그에 속성 이름="속성 값" 형태로 사용하는 문법입니다. 태그의 속성을 정합니다.

시작 태그에 속성 이름="속성 값" 형태로 사용하는 문법입니다. 태그의 속성을 정합니다.
예시 1: <a> 태그의 href 속성


<a href="https://codeit.kr">코드잇</a>
예시 2: <img> 태그의 src 속성

<img src="https://example.com/my-image.png">

HTML 파일의 기본 구조

맨 윗줄에는 이 파일이 HTML 문법을 쓴다는 걸 알려주는 코드가 들어갑니다.
<!DOCTYPE html> 인데요. 여기서 DOCTYPE 은 문서 타입(Document Type)이라는 뜻입니다.
그 아래로는 크게 <html> 태그로 감싼 다음에, <head> 태그와 <body> 태그로 나눕니다.
이때 <head> 태그 안에는 페이지에 대한 정보가 들어가고, <body>에는 페이지 내용이 들어갑니다.


<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

배운 태그 정리

사이트 이름

웹 브라우저 탭이나 창에 보이는 제목을 정할 수 있습니다. 참고로 페이지 내용이 아니라
 페이지에 대한 정보이기 때문에 <head> 태그 안에 구분해서 넣습니다.
 
 
<head>
  <title>윤동주 서시 - 한국 시 모음</title>
  ...
</head>

인코딩 정하기

한글을 지원하는 인코딩인 UTF-8을 사용하도록 정하는 코드입니다.   
<meta> 태그를 사용해서 <head> 태그 안에 넣어 주면 됩니다.


<head>
  <meta charset="utf-8">
  ...
</head>

 

제목

제목(Heading)은 제일 큰 것부터 작은 것까지 <h1>, <h2>, ... <h6> 태그를 사용할 수 있습니다.
사이트 이름에 쓰는 <title> 태그와 헷갈리지 않도록 주의하세요!


<h1>서시</h1>
<h2>시인 윤동주</h2>

단락

단락(Paragraph)은  <p>태그로 감싸면 되는데요.
이때 코드에서 줄 바꿈은 화면에 나오지 않고 붙어서 보입니다



<p>
  죽는 날까지 하늘을 우러러
  한 점 부끄럼이 없기를,
  잎새에 이는 바람에도
  나는 괴로워했다.
  별을 노래하는 마음으로
  모든 죽어가는 것을 사랑해야지
  그리고 나한테 주어진 길을
  걸어가야겠다.
</p>
<p>
  오늘 밤에도 별이 바람에 스치운다.
</p>

줄 바꿈

HTML은 기본적으로 문장들을 이어서 보여 줍니다. 줄 바꿈(Break Line)은 <br>이라는 태그를 사용합니다.
 이때 줄 바꿈 태그 안에는 내용이 없으니까 시작 태그 하나만 <br>처럼 씁니다.
 
 
<p>
  죽는 날까지 하늘을 우러러<br>
  한 점 부끄럼이 없기를,<br>
  잎새에 이는 바람에도<br>
  나는 괴로워했다.<br>
  별을 노래하는 마음으로<br>
  모든 죽어가는 것을 사랑해야지<br>
  그리고 나한테 주어진 길을<br>
  걸어가야겠다.
</p>
<p>
  오늘 밤에도 별이 바람에 스치운다.
</p>

링크

링크는 <a> 태그를 사용합니다. href 속성으로 이동할 주소나 경로를 적어 주면 됩니다.


<a href="https://ko.wikipedia.org/wiki/%EC%84%9C%EC%8B%9C_(%EC%8B%9C)">
  위키 문서 보기
</a>

 

 

이미지

이미지(image)는 <img> 태그를 사용합니다. src 속성으로 이미지 파일의 주소나 경로를 적어 주면 됩니다

예시 1: 인터넷에 올라와 있는 사진

<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Yun_Dong-ju.jpg">
예시 2: 같은 폴더에 있는 yun-dong-ju.jpg 파일 사용하기



<img src="yun-dong-ju.jpg">
예시 3: images 라는 폴더 안에 있는 파일 사용하기

<img src="images/yun-dong-ju.jpg">

영역 나누기

<div> 태그로 여러 태그를 감싸거나,  <span> 태그로 텍스트 일부만 감쌀 수 있습니다.
참고로 이렇게 영역을 나누는 건 나중에 CSS를 사용할 때 스타일을 적용하는 용도로 사용할 겁니다.


<div>
  <h1>서시</h1>
  <h2>시인 <span>윤동주</span></h2>
</div>
<div>
  <p>
    죽는 날까지 하늘을 우러러<br>
    한 점 부끄럼이 없기를,<br>
    잎새에 이는 바람에도<br>
    나는 괴로워했다.<br>
    별을 노래하는 마음으로<br>
    모든 죽어가는 것을 사랑해야지<br>
    그리고 나한테 주어진 길을<br>
    걸어가야겠다.
  </p>
  <p>
    오늘 밤에도 별이 바람에 스치운다.
  </p>
</div>

 

 

HTML 기본 - Web 개발 학습하기 | MDN

HTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 콘텐츠는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수

developer.mozilla.org

 

'웹퍼블리싱 > HTML' 카테고리의 다른 글

HTML 문서 제목 문단 링크 이미지 버튼 목록  (0) 2024.03.12
HTML 기본  (0) 2024.03.12
HTML이란 무엇입니까?  (0) 2024.03.11
<!DOCTYPE html>
<html>
    <head>
    <title>Weekly Codeit</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1>Weekly Codeit</h1>
    <h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
    <p>
        생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를
        사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면
        복잡한 일도 한 번에 뚝딱하거든요.
    </p>
    <p>보기</a>
        유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는
        꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!
    </p><a>자세히보기</a>
    <h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
    <p>
        넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천
        시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는
        프로그램을 의미합니다.
    </p>
    <p>
        내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다.
        (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서
        영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫
        화면에 보여주기 때문이죠.
    </p>
    <h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
    <p>
        HTML 파일을 작성하려면 DOCTYPE, &lt;html&gt;, &lt;head&gt;, &lt;body&gt; ... 적어야 할 것이 참
        많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는
        !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할
        수 있답니다!
    </p>
    <p>
        이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는
        뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요.
        개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼
        수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
    </p>
    <h2>코둥이 퀴즈</h2>
    <p>
        머신 러닝에서 유저에게 유저가 좋아하거나<br>
        구매할만할 상품을 추천해 주는 프로그램을<br>
        □□ □□□ (이)라고 부른다.
    </p>
    <p>
        빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>
        선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.
    </p>
    <p>Weekly Codeit</p>
    <p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
    <p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
    <p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
    <p>수신 거부 Unsubscribe</p>
    </body>
</html>

'웹퍼블리싱' 카테고리의 다른 글

웹사이트 어떻게 만들나요?  (0) 2024.03.11

 

  • root 노드(뿌리 노드): 트리의 시작 노드, 뿌리가 되는 노드를 말합니다. 보통 트리를 표현할 때 위 그림처럼 가장 위에 root 노드를 놓는 방식으로 나타냅니다.

 

  • 부모 노드: 특정 노드의 직속 상위 노드입니다. 노드 G, J, K가 있는 노란색 박스를 살펴보면 G가 J와 K의 부모 노드입니다.

 

  • 자식 노드: 특정 노드의 직속 하위 노드입니다. 부모 노드와 반대되는 개념인데요. 노드 G, J, K가 있는 노란색 박스를 살펴보면 J와 K가 G의 자식 노드입니다.

 

  • 형제 노드: 같은 부모를 갖는 노드입니다. D와 E는 둘다 그 부모가 B죠? 이럴 때 D와 E는 서로 형제 노드입니다.

 

  • leaf 노드 (잎/말단 노드): 자식 노드를 갖고 있지 않은, 가장 말단에 있는 노드입니다. 트리의 끝에 있다고 해서 root(뿌리) 노드와 반대되는 표현으로 leaf(잎) 노드라고 부릅니다. 위 그림에서 노란색 박스로 둘러싼 F가 leaf 노드입니다. F뿐만 아니라 D, H, I, J, K 모두 leaf 노드입니다.

 

  • 깊이: 특정 노드가 root 노드에서 떨어져 있는 거리입니다. 깊이는 해당 노드로 가기 위해서 root 노드에서 몇 번 아래로 내려와야 하는지를 나타냅니다. 예를 들어 위 그림에서 root 노드의 자식 노드인 B와 C는 깊이가 1입니다. D, E, F, G는 깊이가 2이고, H, I, J, K는 깊이가 3입니다. 결국 깊이라는 건 특정 노드가 root 노드로부터 얼마나 멀리 떨어져 있는지를 나타냅니다.

 

  • 레벨: 깊이 + 1. 깊이랑 거의 똑같은 개념입니다. 그냥 깊이에 1을 더한 값이죠. 레벨 1에 있는 노드들, 레벨 2에 있는 노드들… 이런식으로 특정 깊이인 노드들을 묶어서 표현할 때 사용하는 용어입니다.

 

  • 높이: 트리에서 가장 깊이 있는 노드의 깊이입니다. 위 그림의 트리에서는 H, I, J, K가 가장 깊이 있는 노드들이고 그 깊이는 모두 3입니다. 그래서 트리의 높이는 3입니다.

 

부분 트리 (sub-tree): 현재 트리의 일부분을 이루고 있는 더 작은 트리를 말합니다. 위 그림의 트리는 root 노드가 A인 트리입니다. 그런데 이 트리를 좀더 작은 단위로 쪼개보면 더 작은 부분 트리들을 발견할 수 있습니다. 예를 들어 위 그림의 노란색 큰 박스 안을 보세요. 노란색 큰 박스 안에는 ‘C가 root 노드인 트리’가 있는데요. 이런 걸 바로 부분 트리라고 합니다. 지금 C가 A의 오른쪽 자식이죠? 그래서 노란색 큰 박스 안에 있는 부분 트리를 A의 “오른쪽 부분 트리”라고 합니다. 특정 노드를 root 노드라고 생각하고 바라본다면 여러 가지 부분 트리들을 발견할 수 있습니다. 하나의 전체 트리에 여러 부분 트리들이 존재하는 겁니다.

'파이썬' 카테고리의 다른 글

파이썬 추상화  (0) 2024.03.08
파이썬 자료형 문자열 불린 정수 소수  (0) 2024.03.08
파이썬 기초 문법  (0) 2024.03.08

HTML 문서

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

 

 

HTML 제목 

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

'웹퍼블리싱 > HTML' 카테고리의 다른 글

HTML 문법  (0) 2024.03.19
HTML 기본  (0) 2024.03.12
HTML이란 무엇입니까?  (0) 2024.03.11

+ Recent posts