FRONT-END/HTML16

• 

  [HTML] Meta 태그, OG(오픈그래프) 사용 방법 HTML 에서 Head 부분에 해당하는 meta og(오픈그래프)에 대해 알아보도록 하겠습니다. 오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌습니다. OG (Open Graph) 사용자가 클릭하기 전에 크롤러가 해당 웹사이트를 방문하여 HTML의 head의 메타데이터를 크롤링하여 미리 보기 화면을 생성해 줍니다. 대표적으로 카카오톡에서 공유한 링크 또는 티스토리에서 공유되는 링크 등이 있습니다. OG Type 사용 방법 meta og 태그를 사용하기 위해서는 HTML의 .. FRONT-END/HTML 2022. 10. 5.

• 

  [HTML] link 태그 shortcut icon으로 파비콘 적용 방법 HTML link 속성을 통해 파비콘을 적용하는 방법에 대해 알아보겠습니다. 파비콘 파비콘이란 웹사이트 주소창의 조그마한 아이콘을 의미합니다. 이것이 바로 shortcut icon 입니다. shortcut icon 사용 방법 shortcut icon을 사용하기 위해서는 link 태그를 사용해야 합니다. 이제 이 link 태그를 안쪽에 넣어주면 적용이 됩니다. 파비콘 만드는 방법 파비콘을 만들기 위해서는 이미지 파일을 ico 형태로 변경해줘야 합니다. 이것은 다양한 사이트에서 변환이 가능한데, 이 포스팅에서는 genfavicon을 활용하는 방법을 알려드리도록 하겠습니다. http://genfavicon.com/ 접속 select your image 탭에서 파비콘으로 사용할 이미지 선택 사용할 부분 지정후 .. FRONT-END/HTML 2022. 10. 4.

• 

  [HTML] Meta 태그 HTML에서 meta 태그에 대해 알아보도록 하겠습니다. Meta meta 태그는 보이지 않는 태그라고 볼 수 있습니다. 즉 meta는 부가적인 정보를 보여주는 것이죠. 예를 들어 구글에 넷플릭스를 검색하고 아내와 같은 로그인 링크를 볼 수 있는데, 그 아래 세부 정보중 '스마트 TV, 태블릿...'과 같은 텍스트를 확인할 수 있습니다. 이것을 넷플릭스 홈페이지의 개발자 도구를 통해 확인해보면 meta의 content 안에 그대로 들어가 있는 것을 확인할 수 있습니다. 그리고 meta 태그는 닫는 태그가 없이 사용됩니다. 위에서 봤던 것처럼 meta 태그는 두 개의 속성을 가지고 있습니다. 바로 name =""과 content =""입니다. Meta 태그 활용 meta 태그는 위와 같이 문서의 정보를 담.. FRONT-END/HTML 2022. 10. 4.

• 

  [HTML] textarea의 placeholder속성 줄 바꿈 처리 HTML의 textarea 태그의 placeholder 속성에 줄바꿈 처리 하는 방법에 대해 알아보겠습니다. textarea textarea 태그는 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용합니다. 텍스트 입력 영역의 크기는 textarea 요소의 cols 속성과 rows 속성으로 지정할 수 있으며, CSS에서 height 속성과 width 속성을 사용하면 더욱 손쉽게 지정할 수 있습니다. placeholder 속성 placeholder 속성은 텍스트 영역의 예상 값을 설명하는 짧은 힌트를 지정합니다. 사용자가 값을 입력하기 전에 짧은 힌트가 텍스트 영역에 표시됩니다. placeholder 줄 바꿈 placeholder에서 줄 바꿈을 원할 때 태그는 사용되지 않습니다.. FRONT-END/HTML 2022. 9. 14.

• 

  [HTML] Input 내용 버튼 클릭 삭제 Input 태그 안에 textfield 의 내용을 버튼 클릭 한번으로 삭제하는 방법에 대해 알아보겠습니다. Input type="reset" 태그는 의 모든 입력을 초기값으로 재설정하는 reset 이라는 기본 이벤트 핸들러를 가지고 있습니다. 그래서 아래와 같이 간단하게 버튼을 만들어 placeholder에 있는 value를 지워줄 수 있습니다. 사용할 때는 부모 태그를 으로 덥어줘야 합니다. See the Pen Untitled by 서근 (@seogun95) on CodePen. 위와 같이 button 태그를 사용하여 type을 reset으로 넣어줘도 되고, input 태그를 사용해도 결과는 같습니다. Value 속성에 value는 생략 가능합니다. 만약 value를 넣어주면 다음과 같습니다. See.. FRONT-END/HTML 2022. 9. 8.

• 

  [HTML] Block태그와 Inline 태그 종류와 차이점 Block태그와 Inline 태그 종류와 차이점 모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있습니다. 표시 값에는 블록과 인라인의 두 가지가 있습니다. Block 태그 항상 새 줄에서 시작하고 브라우저는 자동으로 요소 앞뒤에 약간의 공백(여백)을 추가합니다. 항상 사용 가능한 전체 너비를 차지합니다. 부모 태그의 너비를 가져옵니다. 높이는 자신의 태그의 자식태그의 높이를 가져옵니다. 일반적으로 사용되는 Block 태그는 와 입니다. Block 태그 종류 - Inline 태그 Inline 태그는 필요한 만큼만 너비를 차지합니다. 대표적으로 태그가 많이 쓰입니다. Iinline 태그 종류 읽어주셔서 감사합니다🤟 참고 문헌 REFERENCE HTML Block and Inline Elements.. FRONT-END/HTML 2022. 9. 5.

• 

  [HTML] 폰트 미리 로드하여 레이아웃 개선하기 웹 폰트를 페이지가 로딩되었을때 먼저 로드 될 수 있도록 하는 방법에 대해 알아보겠습니다. 글꼴 미리 로드 웹사이트에서 웹 폰트 로딩 여부에 관계없이 텍스트가 항상 보이게 되는데 글꼴, 자간, 높이 등의 서식에 따라 웹 폰트 적용 전과 후의 레이아웃이 변경되게 됩니다. 즉 폰트를 넣었지만, 로딩 시에는 그 폰트가 먼저 로딩이 되지 않기 때문에 레이아웃이 변경되어 UI에 부정적인 경험을 주게 되는 것이죠. FOUT을 방지하기 위해 필요한 글꼴을 미리 로드할 수 있습니다. Html as="font" type="font/woff2" 속성은 브라우저에 이 리소스를 글꼴로 다운로드하도록 지시하고 리소스 대기열의 우선순위를 지정하는 데 도움이 됩니다. crossorigin 속성은 글꼴이 다른 도메인(웹 폰트)에서 .. FRONT-END/HTML 2022. 8. 24.

• 

  [HTML #8] 표 table, tbody, tr, td, thead, caption HTML 에서 간단하게 태그를 통해 표를 만드는 방법에 대해 알아보겠습니다. Table 태그는 이름 그대로 표를 생성해주는 HTML 태그입니다. 의 태그는 아래와 같습니다. 태그 속성 설명 테이블을 생성하는 태그 각 열의 제목을 정의 테이블의 행 (세로) 테이블의 열 (가로) / 하나의 테이블 셀을 정의 테이블을 하나의 그룹으로 묶을 때 사용 테이블의 헤더 부분을 그룹화 테이블 캡션을 붙일때 태그 바로 뒤에 사용 태그 속성 사용 그럼 위 태그를 을 사용해보도록 하겠습니다. 시작은 로 시작하고 행과 열을 와 태그로 정해 주면 됩니다. 바로 위에 사용된 표를 그대로 HTML로 작성해보려고 합니다. 가로가 7줄, 세로가 2줄로 정해주고, 태그를 총 7개, 그리고 태그 안에 태그를 총 2개씩 넣어주면 됩니다. .. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #7] 이미지 img (src를 CSS로 대체 하는 방법) Img 태그는 이미지를 삽입할 수 있게 해주는 HTML 태그 입니다. 오늘은 HTML에서 태그 속성을 사용하는 방법과 CSS로 src를 대체하는 방법에 대해 알아보았습니다. Img 태그는 웹페이지에 이미지를 삽입할 수 있게 도와주는 태그인데, 이 속성으로는 src, width, height, alt, title로 총 5가지가 존재합니다. src : 이미지의 경로 width : 이미지의 가로 크기 height : 이미지의 세로 크기 alt : 이미지가 표시되지 않거나, 잘못된 경로일 때 출력되는 메시지 title : 이미지의 간략적인 정보 표기를 위한 말풍선 태그 사용 방법 태그는 닫는 태그 없이 속성만으로 사용이 가능합니다. 만약, 경로에 오류가 있거나 삭제 또는 존재하지 않는 이미지 일시에는 alt에 .. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #6] 새로운 게시글 만들기 a, html 오늘은 HTML을 통해 특정 페이지로 이동할 수 있도록 하는 사이트를 간단하게 만들어 보도록 하겠습니다. HTML 게시글 이동 하이퍼링크로 지정된 텍스트를 클릭했을 때, 특정 페이지로 넘어가도록 해주려고 하는데, html 파일을 3개 만들어 놓고 시작하도록 하죠. 여기서 index.html은 메인 페이지가 되겠고, 숫자로 되어있는 .html 파일은 이동 시킬 페이지가 되겠네요. 우선, index.html에 구조를 간단하게 만들어주고 1.html을 태그 링크와 함께 연결시켜보도록 하겠습니다. 웹사이트 만들기 첫 번째 페이지로 이동 이렇게 태그 안에 '첫 번째 페이지로 이동'을 클릭하면 1.html 페이지로 넘어가게 됩니다. 그럼 리스트를 만들어놓고 다른 페이지도 꾸며보도록 하죠. 웹사이트 만들기 HTML을.. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #5] DOCTYPE - !doctype html HTML을 디버깅 하다보면 상단에 과 같은 선언을 보게 되는데 오늘은 이것에 대해 간단하게만 알아보려고 합니다. HTML DOCTYPE HTML에 들아가는 문자인 은 줄 여말 해 DTD라고 불리기도 하며, Document Type Declaration의 약자 입니다. 직역해보면 문서 형식 선언이라고 보면 되겠네요..! DTD란 HTML을 작성할 때, 작성된 코드가 어떤 방식의 HTML 코드로 선언되었는지 브라우저에게 알려주는 문자라고 볼 수 있습니다. HTML5은 구조상 DTD로 충분히 정의될 수 없으나 표준 문서를 명시할 필요성이 있으므로 아래와 같은 문서 형식 선언을 갖게 됩니다. DOCTYPE은 복잡하게 생각할 필요 없이, HTML으로 웹을 만들 때 최상단에 을 선언해주시기만 하면 됩니다. 참고로 .. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #4] 기본구조 head, body 및 폰트 깨짐방지 HTML에서 가장 기본이 되는 구조와 폰트가 웹사이트에서 깨졌을때 해결하는 방법에 대해 알아보도록 하겠습니다. HTML 구조 HTML에는 기본적으로 가장 핵심이 되는 태그가 존재합니다. 위처럼 은 최상단에서 웹사이트를 만드는 기준이 되고, 태그는 본문이라고 생각하면 됩니다. 그렇다면 태그는 무엇일까요? 기본적으로 HTML에서는 몇 가지 정해놓은 약속 같은 것이 존재하는데, 에 만 들어가야 하는 태그들과 그 외적인 태그들을 특정 태그 안에만 넣도록 정해놓았습니다. 본문이 아닌 태그들은 태그 안에 넣어주면 되는데, 대표적으로 , 태그 등이 있습니다. 태그는 태그 위에 위치시켜주면 됩니다. 태그는 위에서 언급했듯이 본문이라고 생각하면 됩니다. 위키백과에서 개발자 도구를 열어 구조를 살펴보면 다음과 같습니다. .. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #3] 태그 중첩 조합 li, ul, ol HTML에서는 태그를 중첩해서 사용하는 경우도 빈번한데 이번에는 왜 태그를 중첩해서 사용해야 하는지 알아보도록 하겠습니다. HTML 중첩 태그 대표적으로 중첩 태그를 흔하게 사용하는 것은 바로 리스트입니다. 태그를 사용해 보면서 중첩 태그란 무엇인가에 대해 알아보죠. 리스트형식인 텍스트를 정렬하고 싶을 때는 태그를 사용하여 쉽게 정렬해줄 수 있습니다. 서근 미진 희진 유진 만약 섹션이 있는 리스트를 만들고 싶다면 태그를 중첩 사용해야 합니다. 예를 들어 아래와 같이 단순히 공백만 준다고 해도 HTML에서는 이를 인식하지 않고 그대로 나열된 상태로 출력하게 됩니다. 서근 미진 희진 유진 HTML CSS JS 이를 해결하기 위해서는 태그를 중첩 사용 하면 됩니다. See the Pen Untitled by .. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #2] 속성 과 링크 a, href="" target="_blank" 이 번에는 HTML의 속성이라는 문법과 링크라는 가장 중요한 두 가지 기능을 어떤식으로 표현할 수 있는지 알아보도록 하겠습니다. HTML 속성 및 링크 하이퍼링크로 지정된 텍스트를 클릭하면 특정한 웹사이트로 이동하게 되는 속성을 사용하고 링크로 연결시킬 수 있습니다. 여기서 라는 태그를 먼저 알 아야 합니다. A는 Anchor이라는 약자입니다. 즉, 어떠한 문자가 링크에 Anchor(고정, 연결) 되어 있다는 의미로 사용된 것으로 보입니다. 그렇다면 이 태그를 어떻게 사용할 까요? Href See the Pen Untitled by 서근 (@seogun95) on CodePen. 전 게시글에서도 말했듯, 태그에 href 속성을 통해 링크를 페어링 시켜줄 수 있습니다. 태그만으로는 정보가 부족하다고 HTM.. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #1] 태그 티스토리 블로그를 꾸미다 보니, 웹에 대한 매력에 빠져 좀 더 자세하고 깊게 배워보고 싶은 마음이 들어 HTML/CSS/JS 에 대한 지식을 정리하고 공유해 볼까 합니다. HTML HyperText Markup Language HTML은 웹 브라우저에 표시되는 기본적인 틀이라고 생각하면 됩니다. HyperText 하이퍼텍스트를 가장 중요한 특징으로 한다. 쉽게 말해 태그의 href 즉, 링크라고 생각하면 됩니다. Markup 마크업이라는 문법적인 형식을 가진 프로그래밍 언어 Language 컴퓨터 프로그래밍 언어 태그란? HTML은 확장자 로 시작해 로 마무리되어야 합니다. 서근 개발 노트 처음 등장하는 태그를 '시작 태그'라 칭하고, 슬래시가 있는 태그를 '닫히는 태그'라고 칭합니다. 그리고 그 태그 .. FRONT-END/HTML 2022. 7. 24.