본문 바로가기

퍼블리싱 & 프론트엔드/html & CSS39

vs code 에서 html 한 번에 입력하기 - html 필수코드 자동완성 오늘 코드잇 강의를 듣다가 (나에게는) 대단한 꿀팁 하나를 알게되어 블로그에도 공유하려고 한다. html 파일의 구조를 보면 ,, , 등의 태그를 순서대로 쓰는데, 이런 필수 코드들을 한 번에 자동으로 입력할 수 있는 방법이다. html 필수 코드 한 번에 입력하기 먼저 vs code를 실행하고 새로운 html 파일을 만든다. 그 다음 느낌표(!)를 쓰면 아래에 자동 완성 창이 뜬다. 그 상태에서 그대로 엔터(enter) 키를 누른다. 그러면 오오오오오!!! 자동으로 코드들이 입력된다. 다시 한 번 검토해서 본인의 사이트 상황에 맞게 바꾸어 주어야 하는 부분도 있지만, 필수 코드들을 한 번에 입력할 수 있다니 나같은 코린이들에게는 정말 반가운 꿀팁이다. 그리고 깨알 자랑! 강의를 열심히 들어서 오늘 드디.. 2023. 7. 25.
정보와 의미를 담고 있는 html 태그들(meta, link, title, 시맨틱 태그) 의미를 담고 있는 html 태그를 효율적으로 사용하면 검색 최적화나 웹 접근성 등에 도움이 된다. 이번 포스팅에서는 정보와 의미를 담고 있는 html 태그들에 대해서 알아보도록 하겠다. 안의 , , 태그는 페이지에 대한 정보를 담고 있는 태그이다. 태그 안에 컴퓨터가 읽고 사용하는 메타 데이터(meta data)가 담겨 있는데, 메타 데이터는 '데이터에 대한 데이터'라고 할 수 있다. (말이 어렵...) 페이지 제목을 나타내는 , css 파일이나 파비콘 이미지 등을 불러오는 , 그리고 각종 태그 등이 이에 속한다. 첫번째 줄에 있는 meta charset은 utf-8 인코딩을 사용해서 올바른 문자를 보여주게 하고, 네번째 줄의 og는 오픈 그래프(open graph)의 약자이다. 카카오, 페이스북, 네이.. 2023. 5. 3.
다른 코드 불러올 때 사용하는 <link>, <script> 태그 코드잇 학습일기 챌린지가 끝났다. 동기부여도 되고 나름 재미있다고 생각했는데, 새로운 공지가 올라오지 않은 것을 보니 5월에는 챌린지를 진행하지 않는 것 같다. 그래도 뭐, 그거랑은 상관없이 앞으로도 계속 블로그에 공부한 내용을 정리해서 올릴 예정이다. 오늘은 다른 코드를 불러올 때 사용하는 링크(link) 태그와 스크립트(script) 태그에 대해서 소개하려고 한다. 외부에서 파일을 불러올 때는 태그는 외부에서 파일을 불러올 때 사용하는 태그이며, 구글 폰트를 적용할 때에도 link 태그를 사용한다. 파비콘을 지정할 때에도 link 태그를 사용한다. favicon.ico 라는 파일을 서버에 업로드 한 후에 해당 경로를 지정해주면 된다. rel 속성에는 icon 이라고 쓴다. html에서 자바스크립트를 .. 2023. 5. 2.
코드잇 학습일기 Day17. 폼 태그 속성, 인풋 태그 종류와 속성 어제는 폼(form) 태그의 구성과 인풋, 라벨, 버튼을 만드는 코드를 공부했다. 오늘은 어제에 이어 폼 태그의 속성, 인풋의 종류 등에 대해서 알아볼 예정이다. 폼 태그의 속성 폼 태그는 action 속성과 method 속성 - 두 가지 속성을 가지고 있다. action 속성 폼에 내용을 입력하고 버튼을 누르면 기본적으로 페이지를 이동한다. 만약 현재 페이지의 주소가 heinafantasy.com 이라고 가정하고, 아이디에 heina, 비밀번호에 1234를 적었다고 하면, 버튼을 눌렀을 때 아래와 같은 주소로 이동한다. http://heinafantasy.com/?id=heina&password=1234 주소를 자세히 들여다 보면, 물음표 이후로 폼에 입력한 값이 들어있다. 이런 것을 쿼리 문자열(Qu.. 2023. 4. 25.
코드잇 학습일기 Day.16 폼(Form) - 인풋(Input), 라벨(Label), 버튼(Button) 오늘의 코드잇 학습일기 시작~ 폼 태그에 관련된 강의였는데, 우리가 흔히 볼 수 있는 로그인, 회원가입 등 페이지와 관련이 많은 내용이었다. 폼(Form) 웹사이트에서 내용을 적는 부분을 폼(Form)이라고 한다. 폼의 구조를 살펴보자면, 가장 먼저 내용을 입력하는 칸을 인풋(Input)이라고 부르며, 각 인풋 옆에 있는 이름을 라벨(Label)이라고 부른다. 그리고 버튼(Button)은 누르면 입력한 데이터를 전송 or 저장하는 역할을 한다. 클래스101의 로그인 화면을 예제로 확인해보도록 하자. 폼(Form)을 만드는 방법 먼저 폼을 만들려면 태그로 감싸 주어야 한다. 그 안에 태그를 넣는다. 미리보기를 실행해 보면 사용자가 내용을 입력할 수 있는 칸이 하나 생긴 것을 확인할 수 있을 것이다. 참고로.. 2023. 4. 24.
코드잇 학습일기 Day15. 아이프레임(iframe) 원래 코딩강의는 되도록 평일에 듣고, 주말에는 휴식에만 집중하는 편인데... 이번 주에는 정신이 없어서 학습일기를 한개밖에 쓰지 못했다. 학습일기 챌린지가 주 2회인데, 주말에 1개를 쓰지 않으면 4월 챌린지를 실패하는 상황이라서, 주말이지만 코딩강의를 듣기로 했다. 아이프레임(iframe) 유튜브에서 공유하기(동영상 퍼가기) 기능을 이용할 때 iframe 으로 시작하는 태그를 확인할 수 있다. 아이프레임은 inline frame 이라는 의미이다. 간단하게 설명하자면 html 문서 안에서 또 다른 html 문서를 보여주는 역할을 한다. 개발자 도구를 열어서 보면 태그 안에는 , , 태그가 모두 들어있는 것을 확인할 수 있다. 이것을 응용하여, 만약 어떤 html 화면에서 다른 html 화면을 불러오고 싶.. 2023. 4. 22.
코드잇 학습일기 Day14. 멀티미디어(이미지, 비디오, 오디오) 한동안 바쁜 일이 있어서 코드잇 강의를 듣지 못했다. 더 미루면 이번 주 코드잇 학습일기 챌린지를 할 수 없을것만 같아서, 시간을 쪼개어 모니터 앞에 앉았다. 이미지를 넣을 때 이미지를 넣을 때에는 라는 태그를 사용한다. 태그 안에 src 속성값으로 이미지 경로를 적어주면 된다. 이미지 태그와 함께 사용하는 속성으로 alt가 있는데, 이 곳에는 이미지에 대한 정보를 텍스트로 넣는다. 그러면 마크업만 보고 어떤 이미지인지 알 수 있으며, 이미지를 볼 수 없는 시각장애인용 스크린리더 프로그램에서도 alt에 적혀있는 내용을 읽어준다. 또한 이미지 다운로드에 실패했을 때에도 이 이미지를 보여준다. 이미지를 보지 못해도 어떤 이미지인지 대충 짐작이 가능하기 때문에 사용자를 배려하여 되도록이면 alt 속성을 적어.. 2023. 4. 21.
코드잇 학습일기 Day13. 테이블 태그와 스타일링 요즘 듣는 코드잇의 html 핵심 개념 강의는 기초적인 html 태그들을 소개하고 있다. 이미 알고 있는 내용들을 한 번 더 정리하는 기분으로 듣고 있는데, 설명이 어렵지 않고 퀴즈도 재미있는 편이라 강의를 듣는 시간이 기다려진다. 이 정도면 취미로 코딩 강의를 듣는다고 할 수 있을지도 모르겠다. 표를 그리고 싶을 때 , , 표로 정리된 정보를 나타내고 싶을 때 사용하는 태그에 대해서 알아보도록 하겠다. 표를 그릴 때에는 아래 예제처럼 태그 안에 과 태그를 사용해서 만든다. 태그는 행을 표현하며, 태그는 열을 표현한다. 예전에는 테이블 태그를 이용해서 레이아웃을 나누고 사이트를 꾸미기도 하였는데, 최근에는 flex, grid 등 바람직한 방법들이 있으므로 테이블 태그는 표로 정보를 보여주고 싶을 때에만 .. 2023. 4. 12.
코드잇 학습일기 day12. 리스트 태그와 스타일링 하루 업무를 마치고 퇴근하려다가 오늘 코드잇 강의를 듣지 않았다는 게 떠올라서 다시 모니터 앞에 앉았다. 오늘 강의는 모두 알고있는 내용 들이어서 복습하는 기분으로~ 빠르게 다섯개 강의를 수강할 수 있었다. 순서 있는 리스트 만들기 , 순서가 있는 리스트를 만들 때는 태그 안에 태그를 사용해서 내용을 작성하면 된다. 그렇게 하면 코드에 적혀있는 순서대로 1, 2, 3 숫자로 된 글머리가 생긴다. 순서 없는 리스트 만들기 , 순서가 없는 리스트를 만들 때에는 태그 안에 태그를 사용해서 내용을 작성한다. 이렇게 하면 내용 앞에 자동으로 글머리 숫자 대신, 동그란 모양의 포인트가 생긴다. 리스트 스타일링하기 태그에 type이라는 속성을 주어 리스트 글머리를 어떻게 보여줄지 정할 수 있다. 라고 쓰면 알파벳 소.. 2023. 4. 10.
코드잇 학습일기 Day11. 텍스트 문서를 작성하는 데 필요한 태그들 오늘까지 마감인 업무가 있어서 오전부터 정신이 없다. 더 일찍 출근했어야 하는데, 하는 후회를 해보지만... 그건 이미 엎질러진 물이고, 디자인 리뷰가 있는 4시 전까지 초인모드로 달리는 수밖에...! 총 5개 섹션 정도를 만들어야 되는데 2개를 완성해놓고, 집중력이 너무 저하된 것이 느껴져서 잠시 코드잇 강의를 수강하기로 했다. 오늘은 텍스트 문서를 작성하는 데에 필요한 태그들에 대해서 알아보는 시간을 가졌는데, 코드잇 강의의 가장 첫 문단 문구가 기억에 남는다. 은 웹브라우저에서 큰 글자로 두껍게 보입니다. 하지만 이런 겉모습이 제목 태그의 본질은 아닌데요. 태그의 본질은 현재 페이지에서 가장 큰 제목이라는 의미입니다. 무언가를 결정하거나 생각하고 행동할 때, 그것이 무엇이든 본질에서 멀어지면 안되는.. 2023. 4. 5.

티스토리툴바