무정하지 않게 살기

form은 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그입니다. 여기에서 서버란, 정보를 제공하는 호스트(host)를 말합니다. 가령, 우리가 티스토리 홈페이지를 열고자 할 때, 티스토리의 서버에 html 페이지를 요청하면 서버에서 html 문서로 이루어진 웹 페이지를 응답으로 보내줍니다. 그리고 우리의 웹 브라우저에 홈페이지가 오픈되는 것이에요. 즉, 클라이언트(사용자)가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공합니다. 클라이언트가 어떤 요청을 보내는가에 따라, 응답은 달라질 수 있습니다. (아이디가 다르다던가, 비밀번호가 다르면 로그인을 거절하는 응답을 보낼 수도 있습니다.) form 여기에서 form은 입력 요소들을 감싸는 형태이며, 입력 값을 서버 측으로 제출(s..

지금까지 출력태그 (코드에 쓰여진 대로 보여주는 것) 에 대해서 알아보았다면 이번에는 입력태그에 대해서 배워볼게요. 입력 태그는 렌더링 이후의 결과물에다가 내용을 새롭게 기입할 수 있는 태그 입니다. 입력태그 input 태그 사용자로부터 값을 입력받을수 있는 대화형 컨트롤(또는 ‘필드’)를 나타냅니다. 기본적으로 인라인 요소이며, 단일 태그입니다. input은 속성 값에 변화를 주어서 각각의 다른 형태와 속성으로 바꿀 수 있습니다. 즉, input의 핵심은 type 속성이에요. type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라집니다. 사용 가능한 type은 20여 가지이며, 기본 타입의 값은 text (문자를 입력하는 네모 박스) 입니다. 그럼 가장 기본적인 text 로 사용할 수 있..

HTML 목록 LIST 태그 태그 목록은 연관 있는 항목(item)들을 나열한 것을 의미하며, 목록을 생성하면 블록 레벨 요소가 만들어집니다. HTML에서 목록은 ‘순서 없는 목록’과 ‘순서 있는 목록’으로 구분됩니다. ● Unordered List 순서가 없는 리스트. 태그 이름도 ul 입니다. ● Ordered List 순서가 있는 리스트. 태그 이름도 ol 입니다. 위 리스트로 와 를 입력하면 빈 항목 리스트가 생성됩니다. 이제 이 속에 목록의 요소들을 넣어주야 합니다. 태그 태그는 list item 이라는 뜻으로 목록에 들어가는 항목 하나 하나를 표현할 때 사용하는 태그입니다. 항목들( 태그들)을 감싸는 태그가 무엇이냐 (ul인지 ol인지)에 따라 목록의 앞에 붙는 기호가 달라집니다. ol에 들어..

링크 anchor 링크는 anchor (앵커, 축, 정박지, 닻 과 같은 의미를 가집니다.) 의 약자인 a 태그를 사용합니다. 하이퍼링크를 표시하는 태그는 다음과 같습니다. a 태그 요소는 href 속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크(연결)를 만드는 역할을 합니다. a태그는 인라인 요소이고, 콘텐츠는 주로 링크의 목적지예요. href 는 하이퍼링크 레퍼런스의 약자입니다. 출처 : 유노코딩 ; https://www.youtube.com/c/%EC%9C%A0%EB%85%B8%EC%BD%94%EB%94%A9/about target 타겟 하이퍼링크를 눌러서 열었을 때 새 탭에서 열지, 아니면 현재 창에서 열지를 정할 수도 있습니다. target = "_..

이번에는 컨테이너의 요소와 그 전역 속성에 대한 것을 공부하겠습니다. 전역 속성에 대한 것을 살펴 보다보면 문서의 검색 엔진에 노출이 잘 되는 방법들도 같이 참고해볼 수 있으니까 만약 블로그 포스팅에서 노출이 잘 되는 방법 등에 관심이 있으신 분들도 보시면 좋을 것 같아요! 컨테이터 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그를 ‘컨테이너’라고 합니다. 하지만 꼭 필요한 경우가 있습니다. 콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 컨테이너를 사용하는 것이 좋습니다. 예를 들어 마치 문서를 작성할 때 한꺼번에 글씨체를 바꾸거나 색상을 바꿀 때 드래그해서 전체를 한 번에 묶은 다음 스타일을 적용하는 것처럼요. 스타일을..

이번에는 태그 요소들에 대해서 조금 더 알아보고 이미지를 표시하는 것까지 해볼게요. 요소 유형 태그들 중 블록 요소를 형성하는 태그가 있고, 인라인 요소를 형성하는 태그가 있습니다. ● 블록 레벨 요소 블록 레벨 요소는 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성합니다. 필요하지 않은 너비까지 모두 차지하고 있을 때에는 블록 레벨 요소라고 봅니다. 개발자 도구에서 단락을 만들었을 때 주변을 감싸는 주황색 여백이 있었던 것처럼, 어떤 블록을 새롭게 형성하게 하는 같은 경우에는 블록 레벨 요소라고 볼 수 있습니다. 블록 안에 블록을 넣을 수도 있습니다. 일반적으로 블록 안에 블록을 넣지는 않지만 마치 표 속에 표를 그리는 것과 같은 것이라고 보시면 돼요. 빈정대며 네가 말했지. 나는 끝까지 말하지 ..

이제 HTML 로 텍스트를 입력하는 것을 직접 해볼게요. 문단 (paragraph) 하나의 단락은 다른 콘텐츠와 구분이 됩니다. p 태그는 문단 요소를 나타내는 태그로써, 가장 많이 사용되는 텍스트 태그입니다. 하나의 p 태그는 하나의 문단을 표현한다. 문단과 문단 사이에는 공백이 있습니다. 즉 글의 내용을 감싸는 여백을 추가합니다. 문단을 작성하는 예제를 작성해볼게요. 우리는 사랑에 관한 비유로 낱말 놀이를 하기로 했어. 너는 치즈, 소금, 얼음이라고 말했어. 나는 입이 없는 것처럼 조용히 웃었어. 왜 사라진 것들 뿐이니. 구름, 바다, 비라고 내가 대답했어. 그렇다면 도처에 사랑이 있겠네. 주황색 하이라이트는 여백을 뜻합니다. 이번에는 단락 두 개를 붙여볼게요. 우리는 사랑에 관한 비유로 낱말 놀이를..

Tag 태그 HTML의 문법은 딱 한 가지예요. 태그(tag)만 기억하면 됩니다. 태그란 HTML 코드에서 정보(콘텐츠)를 정의하는 형식을 말합니다. 태그는 다이아몬드 기호와 / 기호를 사용해 콘텐츠의 시작과 끝을 표시합니다. 태그는 콘텐츠를 감싸고 있고, 그 안에는 태그명이 기입되어 있습니다. 태그명은 콘텐츠의 성격과 의미를 나타내므로 무척 중요합니다. 태그는 다음과 같은 형태로 사용합니다. 여기에 콘텐츠를 기입합니다 (여는 태그) (닫는 태그) 주석 HTML 주석의 예) 단일 태그 앞서 보았듯 태그는 과 기호를 사용해 콘텐츠의 시작과 끝을 표시합니다. 하지만 경우에 따라 시작과 끝을 구분할 필요가 없는 태그도 존재합니다. 이를 단일 태그라 하며, 단일 태그의 형식은 다음과..

오늘부터 웹 개발 HTML 입문 공부를 시작합니다! 먼저 개요와 입문의 기초부터 시작합니다. html에 대해서 전혀 모르는 쌩초보, 비전공자 입문을 기준으로 수업을 정리합니다. ^^ 이점 참고 부탁드립니다! 프론트엔드와 백엔드 ● 프론트엔드Frontend : 사용자들에게 시각적으로 보여주는 부분 -> HTML, CSS, 자바스크립트가 필수! ● 백엔드Backend : 프론트엔드에서 보여주는 정보들은 서버가 보유하고 있는 정보들. 사용자들이 이용할 수 있는 정보를 관리하는 부분. -> 자바, 파이썬, Golang(구글에서 만든 프로그래밍 언어) 등 선택 가능 HTML 이란 HTML 의 의미 ~ 하이퍼 텍스트와 콘텐츠를 표시해주는 언어! ~ HTML은 HyperText Markup Language를 의미합니..