본문 바로가기

HTML_CSS20

HTML_가져오기, 사용하기 (feat. script, link) 우리가 HTML로 작업을 하다보면 여러가지 툴이나 파일들을 불러와야 하는 경우가 자주 생긴다. 대표적인 예시로 JavaScript를 body나 문서 내에 작성할 수 있지만 Js파일로 따로 작성해 보기 좋게 만들 수 있다. 또 페이지의 글꼴이나 favicon 등 파일들을 가져와야 하는 경우가 많다. 이런 상황에 사용할 수 있는 것이 바로 위 예시 태그들은 보통 head태그 내 에서 사용된다. 물론 script태그는 랜더링이 끝난 이후 작동할 수 있도록 body태그 맨 마지막에 작성되는 경우도 있다. 사용법이 더 설명할 필요가 없을 정도로 간단하다. script 태그는 src속성 내에 파일주소를 작성하면 된다. link태그는 href속성 내에 파일주소를 작성하면 된다. 2023. 1. 23.

HTML_태그 감싸기 (feat. <div>) 하나의 페이지를 만드려면 수많은 태그가 생긴다. 이 태그들이 규칙성이나 정리없이 쭉 나열된다면? 수백 수천줄이 넘어간 코드 덩어리는 더 이상 관리하기가 어려워진다. 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 몇줄 안되지만 벌써 보기 안좋다. 코드를 깔끔하게 정리하고 묶어주는 태그가 바로 Division 즉 태그 이다. 말그대로 레이아웃을 나누어 감싸주는 기능을 가지고 있는데, 그 밖에도 css적인 요소를 줄때도 필요하며 id, class등 명명을 해줌으로써 Javascript 등에서 쉽게 불러올 수 있다. 아마도 태그 중에서는 가장 많이 사용된다고 생각한다. 사용법은 아주 간단하다. 제목입니다. 내용입니다. 이런식으로 구역을 나누어 주고 해당 구역 안에서 어떤 내용이 들어.. 2023. 1. 23.

HTML_선택자 (feat. class, id ) 이 블로그에서는 HTML말고도 CSS, Javascript, React 등 F/E에서 사용하는 언어들을 다룰예정인데 언제나 항상 빠질수 없는 것이 바로 class와 id이다. 우리가 지금까지 사용해왔던 div, p, span, input 등 모든 태그 심지어 body에도 각 이름을 지정해줄 수 있는데 이를 선택자라고 한다. 사용예시를 보며 확인해보자. 1 2 3 4 5 6 7 8 9 10 11 12 Hello, world! Hello, world! Hello, world! cs 위 코드처럼 작성해보자. 첫번째 코드는 class만을 활용하여 작성한 코드 두번째 코드는 id만을 활용하여 작성한 코드인데, class는 같은 이름으로 된 여러 요소를 그룹으로 묶을 수 있다. 예를 들면 1 2 3 4 5 6 7 .. 2022. 6. 20.

HTML_표 만들기 (feat. <table>, <tr>, <td>) HTMl로 홈페이지를 만들때 주로 사용하진 않지만 기능은 알고 넘어가야 할 것 같아 테이블태그도 정리 하려한다. 태그는 여러가지 하위태그를 가지고있는데 , , , , , 등 같이 사용되는 태그가 많다. 여기서 thead는 말그대로 머리부분을 작성하게 된다. thead thead thead thead tbody tbody tbody tbody tbody tbody tbody tbody tfoot tfoot 위 표처럼 는 표 내용에서 분류를 서술하는 구역에 사용된다. ex) 아래와 같은 구역이 thead이다. 번호 이름 나이 연락처 는 테이블 내에서 본문에 해당하는 부분이다. ex) 아래와 같은 구역이 tbody이다. 1 홍길동 15 010-0000-0000 2 흥부 50 010-1111-1111 은 테이블.. 2021. 11. 19.

HTML_선택목록 (feat. <select>, <option>) 우리는 흔히 웹서핑 도중에 쇼핑같은 것을 할때 선택목록을 마주하게 된다. , 은 이렇게 사용자가 무언가를 선택할때 만들 수 있는 태그이다. dropdown list라고 불리는데, 어떻게 출력되는지 확인해보자 먼저 이 리스트를 사용자가 선택하면 서버로 보낸다는 가정 하에 폼태그도 같이 적어 보았다. 태그의 이름을 color로 지정했다. 즉, 선택하고 전송하게 되면 color=red 이런식으로 전송되도록 설정한 것이다. 이후 dropdown list에 항목을 입력하는데 생각보다 간단하다. option (선택사항)을 활용해 값을 지정해 주면 된다. 그런데 여러개를 선택하게 할땐 어떻게 작성해야할까? 물론 위 dropdown list를 여러개 적을 수 있지만 다중선택이 가능한 list를 생성할 수 있다. 이렇게.. 2021. 11. 19.

HTML_입력요소 (feat. <input>) 지난 시간에 form을 다뤄보았는데 input을 알아보기 전에 form을 다뤄서 조금 아쉬운 부분이 있었다. 그래서 오늘은 아쉬운 부분을 채우고자 input을 파헤쳐볼 생각이다. 매우 유용하고 많이 사용되는 태그인데, 이 태그의 목적은 '사용자가 어떤 정보를 입력하도록 하는 것'이다. 예를들면 로그인할때 아이디를 적는 칸, 암호를 적는 칸, 로그인 버튼 등 사용자가 사용하는 공간을 제공한다. 그럼 먼저 텍스트 입력을 만들어보자. 역시나 간단하게 작성한 만큼 간단한 출력물이 나왔다. 위와 같이 텍스트를 입력할 수 있는 칸이 생성된다. 다른 속성과 함께 사용해보자. 사진이 그냥 보면 작아 안보이시는 분들은 눌러서 확대해주세요. 위와 같이 속성 두개를 더 추가해보았다. name="name" // 텍스트 입력공.. 2021. 11. 18.

HTML_정보전달 (feat. <form> ) 우리가 로그인, 물건구매, 검색 등등 여러가지 서비스를 이용할 때 사용하는 기능을 작성할 시간이다. 로그인할땐 그냥 단순히 아이디만 적으면 알아서 접속되는 것이 아니라 아이디와 패스워드를 어떤 서버에 전송해서 알맞는 계정에 접속된 페이지를 보여주는 것이 로그인이다. 우린 이 아이디와 패스워드를 서버에 전송하는 기능 바로 을 배워보려 한다. 먼저 아이디, 비밀번호를 작성 할 수 있는 input 상자를 만들어야 한다. input은 기본적으로 텍스트나, 비밀번호, 버튼, 전송등을 사용할 수 있는 태그이다. 자세한 내용은 다시 다루도록 하고 지금은 이렇게 텍스트, 패스워드를 쓸수 있는 칸을 만들어보자. 그러고보니 이상하다. 칸은 만들었지만 로그인 버튼이 없는 것이다. input태그의 타입속성 중 submit을 .. 2021. 11. 18.

HTML_사진 삽입 (feat. <img>) 홈페이지를 구성하는 요소들이 텍스트(글자)만 있는 것은 아니다. 대부분의 페이지는 이미지, 영상과 같은 콘텐츠가 포함되어 있는데 오늘은 사진, 이미지를 첨부하는 법을 배울 것이다. 먼저 사진을 구해 htm과 같은폴더에 넣거나 깔끔하게 하기위해 하위폴더를 만들어 저장해야한다. 그리고 태그로 이를 불러오면 되는데 우리가 배웠던 태그와 비슷하다는 것을 알 수 있다. 로 구성되는데 src가 경로를 붙여넣는 속성이 되는 것이고, 가운데에 적힌 "image.jpeg"가 이미지를 불러올 경로&이미지 파일이름 이다. 작성자는 연습사진에 이미지파일을 넣어놔서 아래와같이 '/'를 사용해 경로를 포함했다. 이렇게 첨부를 하게되면 첨부한 사진 원본크기대로 출력이 되는데 이와 같이 크기 조절이 필요할 것 같다. 속성 이때 사용.. 2021. 11. 18.

HTML_단락 (feat. <p>) 우리는 단어, 문장, 문단(단락)을 표현하여 대화하고 글을 작성한다. 마찬가지로 홈페이지에 작성하는 글도 단락을 구분해야 하는 경우가 많이 생긴다. 이때 사용하는 태그가 바로 태그이다. 어떻게 표현되는지 실습을 통해 확인해보자. 실습을 위해 HTML_개발프로그램 (feat.atom)게시물의 본문을 사용해보자. 실습. 메모장, 텍스트편집기로 작성을 계속하다보면 작업시간과 체력이 매우 비효율적으로 사용된다는 것을 느낄 수 있다. 마침 html을 배우던 중 개발프로그램에 대한 교육이 있어 바로 적용했다. 프로그램이름은 'atom' html을 사용하기도 좋고, 파일을 작성할때 가독성도 매우 뛰어나며, 별도의 패키지를 적용시키면 자동으로 완성해주는 기능도 있다. 위 내용에서 임의로 바로 적용했다. 다음 줄을 단락.. 2021. 11. 18.

HTML_태그의 활용통계 (feat. advanced web ranking) 우리는 수많은 홈페이지를 접한다. 그 하나하나 홈페이지는 수많은 태그를 사용하고 여러 개발프로그램을 통해 완성된다. 오늘은 어떤 태그가 많이 사용되는지 통계를 통해 확인하고, 어떤 태그를 먼저 배우고 활용도가 높은지 알아보겠다. 통계사이트를 접속해보자 HTML 통계 그 많은 사이트들은 대체로 얼마나 많은 종류의 태그를 사용하는지 확인할 수 있다. 보통 서른개 내외의 태그종류를 사용하는 페이지가 가장 많은 것으로 확인되고있다. 이 말은 우리가 상상했던 것처럼 수백가지의 태그를 배워야 홈페이지 하나를 완성할 수 있다는 부담을 조금 줄여볼 수 있겠다. 그럼 그 홈페이지들은 어떤 태그를 많이 사용할까? 역시나 예상했던 것처럼 기본적인 태그가 가장 많았다. html, head, body, title, meta는 .. 2021. 11. 18.

간단한 Page 만들어보기 첫 실습으로 간단하게 페이지를 만들어보자. 목적은 가상의 'A컴퍼니'회사를 설립하여 자사 소개페이지를 작성하는 것이다. 기본 태그를 입력해 틀을 정의해보자. // 본문의 시작 HTML // html이라는 제목을 작성하고 h1으로 큰글씨로 표현, a태그로 HTML을 누르면 현재 페이지로 다시 돌아올 수 있도록 설정 // 순서가 있는 리스트 시작 공지사항 // 공지사항을 누르면 공지사항.html로 이동할 수 있도록 지정 회사연혁 // 회사연혁을 누르면 회사연혁.html로 이동할 수 있도록 지정 오시는길 // 오시는길을 누르면 오시는길.html로 이동할 수 있도록 지정 고객의소리 // 고객의소리를 누르면 고객의소리.html로 이동할 수 있도록 지정 // 순서가 있는 리스트 종료 A컴퍼니 Page // 현재 페.. 2021. 11. 17.

HTML_형식 (feat. <!DOCTYPE html> ) 은 Document Type Declaration의 약자이다. 역할로써 이 태그는 브라우저에게 '문서구조형식의 html'임을 선언하는 태그이다. 우리 작성자에게 있어 크게 중요한 기능을 하는 것은 아니다. 어떤 표준에 따르는 태그임을 브라우저에게 알리는 태그라고 단순히 이해하면 된다. 이 doctype html은 여러가지 html버전에 따라 태그가 나뉘었는데, HTML5 버전으로 업데이트를 거치며 로 기본 통일 되었다고 생각 할 수 있다. 태그는 첫줄에 또는 앞쪽에 입력되는 경우가 대다수이다. 2021. 11. 17.

이전 1 2 다음

티스토리툴바