소연의_개발일지
article thumbnail
[HTML] 목록 만들기 연습_2
개발공부/HTMl+CSS+JAS 2023. 3. 16. 16:48

DOCTYPE html> Document 목록을 나타내는 태그들 순서가 없는 태그 'ul태그' 각 목록 별로 li태그로 구분함 목록은 특정 기호로 나타냄 순서가 상관 없는 목록을 나타낼 때 사용함 순서가 없는 태그 'ol태그' 각 목록 별로 li태그로 구분함 목록은 숫자로 나타냄 순서가 중요한 목록을 나타낼 때 사용함 , , 활용해 html 목록만들기 연습을 했다.

article thumbnail
[HTML] 목록 만들기 연습_1
개발공부/HTMl+CSS+JAS 2023. 3. 16. 16:47

DOCTYPE html> Document 여러가지 목록 중제목 소제목1 1-1-1번 항목 1-1-1번 항목 1-1-1번 항목 소제목2 1-2번 첫번째항목 1-2번 두번째항목 1-2번 세번째항목 중제목2 2-1번 2-2번 tab 사용해서 직관적으로 만들어주는게 중요하다.

article thumbnail
[HTML] 목록 만들기_<ul>, <ol>, <li>
개발공부/HTMl+CSS+JAS 2023. 3. 16. 16:45

목록 태그 1. : Unordered List(정렬되지 않은 목록)을 나타내는 태그입니다. 예시: 항목 1 항목 2 항목 3 태그 안에 태그를 사용하여 목록 항목들을 추가합니다. 2. : Ordered List(정렬된 목록)을 나타내는 태그입니다. 태그 안에 태그를 사용하여 목록 항목들을 추가합니다. 태그 안에는 각 항목의 번호가 자동으로 매겨집니다. 예시: 항목 1 항목 2 항목 3 3. : List Item(목록 항목)을 나타내는 태그입니다. 또는 태그 안에서만 사용됩니다. 예시: 항목 1 항목 2 항목 3 DOCTYPE html> Document 목록을 나타내는 태그들 순서가 없는 태그 'ul태그' 각 목록 별로 li태그로 구분함 목록은 특정 기호로 나타냄 순서가 상관 없는 목록을 나타낼 때 사용함..

article thumbnail
[HTML] 이스케이프 문자
개발공부/HTMl+CSS+JAS 2023. 3. 16. 16:34

이스케이프 문자 이스케이프 문자: 특수한 의미를 가지는 문자를 일반적인 문자로 인식하도록 지시하는 역할 예시:

article thumbnail
[HTML] 인용문 태그
개발공부/HTMl+CSS+JAS 2023. 3. 16. 16:29

HTML에서 인용문을 나타내기 위해서는 태그를 사용합니다. 인용문은 들여쓰기가 되어 표시됩니다. 예시: 이것은 인용문입니다. 들여쓰기가 되어 표시됩니다. 적용 예시 ↓ 이것만 보면 약간 헷갈릴 수 있어, 다른 문장과 함께 적용해보겠습니다. 와 로 이루어진 태그로 이루어져 있습니다. 이 때, 내용이 있는 태그는 닫는 태그가 존재하며 내요을 넣을 필요 없는 태그는 닫는 태그 없이 사용됩니다. 'br'이나 나중에 배울 'img'와 같은 태그는 닫는 태그 없이 사용됩니다. 또한, 기본적인 들여쓰기나 줄바꿈은 코드상에서는 아무런 역할을 하지 않습니다. 다만, 이러한 들여쓰기나 줄바꿈은 코드를 이해하기 편하게 하기 위해, 또 관계를 표현하기 위해 사용됩니다. 다음과 같은 html코드를 적용하면 ↑ 요렇게 나..

article thumbnail
[HTML] 줄바꿈 태그
개발공부/HTMl+CSS+JAS 2023. 3. 16. 16:23

HTML에서 줄바꿈을 나타내기 위해서는 태그를 사용합니다. 예시: 이것은 첫번째 줄입니다. 이것은 두번째 줄입니다. 실행시켜보면 이렇게 나온다 ↓ html은 엔터를 인식하지 않기 때문에 줄바꿈을 할 때는 를 넣어주어야 한다.

article thumbnail
[HTML] 텍스트 관련 태그
개발공부/HTMl+CSS+JAS 2023. 3. 16. 16:20

HTML에서 텍스트를 꾸밀 때는 아래와 같은 태그를 사용할 수 있습니다. : 굵은 글씨로 강조, : 굵게 표시할 텍스트 : 이탤릭체로 강조, : 이탤릭체로 표시할 텍스트 : 밑줄로 강조 : 취소선으로 표시 : 윗첨자로 표시 : 아래첨자로 표시 : 하이라이팅 효과 : 코드 블록 표시 : 서식이 지정된 텍스트 블록 표시 : 부가 정보처럼 작게 표시해도 되는 텍스트 예시: 이것은 굵은 글씨로 강조된 텍스트입니다. 이것은 이탤릭체로 강조된 텍스트입니다. 이것은 밑줄로 강조된 텍스트입니다. 이것은 취소선으로 표시된 텍스트입니다. 이것은 윗첨자로 표시된 텍스트입니다. 이것은 아래첨자로 표시된 텍스트입니다. 이것은 하이라이팅된 텍스트입니다. 이것은 코드 블록으로 표시된 텍스트입니다. 이것은 작게 표시되는 텍스트입니다..

article thumbnail
[HTML] 제목 태그
개발공부/HTMl+CSS+JAS 2023. 3. 16. 16:16

제목을 표시하기 위해서는 부터 까지의 태그를 사용합니다. 숫자가 작을수록 큰 제목을 나타냅니다. 예시: 이것은 h1 태그로 작성된 제목입니다. 이것은 h2 태그로 작성된 제목입니다. 이것은 h3 태그로 작성된 제목입니다. 이것은 h4 태그로 작성된 제목입니다. 이것은 h5 태그로 작성된 제목입니다. 이것은 h6 태그로 작성된 제목입니다. 반환된 글자 크기는 이런 느낌

[10-13]html 태그(img, ol, ul, title, head, body)
개발공부/HTMl+CSS+JAS 2023. 1. 11. 16:14

10. html이 중요한 이유 경우에 따라 이미지로 글을 쓰는 경우도 있다. 하지만 html의 의미에 정확히 글을 쓴다는 것은 비지니스에 맞는 글을 쓴다는 것이다. 모든 사람들에게 접근성이 높은 글을 써야 한다. 11. 최후의 문법 속성 & img 100%로 하면 크기변형에 상관없이 이미지가 변형됨 unsplash.com 나는 안되서 댓글에서 찾아냄! 윈도우 기준 **CTRL + ALT** 동시 누른 상태에서 밑으로 내리면 된다. 들여쓰기 단축키 : 블럭 씌운 후 tab 넘버링 태그 Ordered List : Unordered List: 13. 문서의 구조와 슈퍼스타들 정리정돈하기 위한 구조를 배워볼 것이다. 웹 페이지 제목 변경 태그 사용자들에게 웹 페이지 명시적으로 알려줄 뿐만 아니라 검색엔진에 검색..

줄바꿈: br vs p
개발공부/HTMl+CSS+JAS 2023. 1. 11. 00:33

새로운 줄을 표현할 때: br 사용 예시: To force line breaks in a text, use the br element. 보여지는 것: HTML 삽입 미리보기할 수 없는 소스 을 사용하면 단락처럼 사용할 수 있음. 단순히 줄바꿈이라는 시각적인 의미를 가지고 있기 때문에 닫지 않음 단락 표현할 때: p 사용예시: This is some text in a paragraph. 보여지는 것: HTML 삽입 미리보기할 수 없는 소스 열리는 태그와 닫히는 태그가 존재한다. p 사용할 때 의미있는 단락을 만들어낼 수 있다. p 단점: 정해져 있는 여백만큼 벌어지기 때문에 자유도가 떨어지게 된다. 하지만 우리에겐 css가 있음! css 예시) 로 사용하면 정교하게 제어할 수 있다.