728x90

프론트엔드개발입문 9

html(9)_ html 태그 (<a> 태그/링크 삽입 태그)

오늘은 링크 연결을 해봅시다 ● : 링크 삽입 태그 anchor(정박하다)에서 옴 이 태그도 이미지 태그처럼 속성 필요 어떤 링크를 참조해야 할 지 모르기때문. 그리고 속성 뒤엔 값이 온다. 여기서는 링크 주소를 의미한다. h=hyper text=링크 ref=reference=참조 "링크주소"라는 링크를 참조해줘 정도로 해석할 수 있겠어요 :) 참 쉽죠~~~ ● target="_blank" : 새 탭 열기 혹시 페이지를 새 탭에서 열고 싶다면 해당 속성을 사용해봅시다 ● title="내용" : 툴팁(말풍선) 링크 클릭 전 커서만 올렸을 때 설명해주는 툴팁을 만들고 싶다면 title="내용"을 추가해주시면 됩니다 속성의 순서는 상관없습니다 :) 오늘도 고생하셨습니다!

UI/html 2021.02.02

html(8)_ html 문서 구조 (title, meta, html, head, body)

기본적인 html의 문서 구조를 알아보자. ● : 페이지(탭) 제목 표시 ● utf-8 언어로 저장된 파일은 웹에서도 utf-8로 읽겠다는 약속 * charset=character set=문자 규칙 ● : 본문 부가 설명 페이지에 표시 될 내용 자체라기 보다는 페이지 본문에 대한 설명이라고 할 수 있다. ex) title, meta ● : 본문 페이지 사용자에게 보여질 내용 ● head 태그와 body 태그를 묶는 최고위층 태그 그리고 html 태그 위에 관용적으로 이 문서는 html으로 작성 되었다는 뜻의 을 써준다. *결 론* 본문 내용 어쩌고 저쩌고 다룽이네 다락방 흥해라 html 초보코딩 코딩입문 웹개발입문 초보개발자 프론트엔드개발입문

UI/html 2021.02.02

html(7)_ html 이미지 삽입

페이지에 사진을 넣어봐요! ● : 사진삽입 태그 실제 이 태그만으로 사진이 삽입되진 않는다. 어떤 이미지를 넣을지를 설정해줘야 한다. 이 속성(attribute)을 source라고 하고 줄여서 src라고 작성한다. 그리고 폴더에 원하는 이미지를 저장한 뒤 속성 뒤에 이미지 주소를 적어주면 된다. 형태가 된다. 이미지 크기를 조절하고 싶을 때는 다른 속성을 추가해서 작성하면 된다 속성 순서는 상관 없다

UI/html 2021.02.01

html(6)_ html 태그 (목차, 리스트, 부모자식 태그)

오늘은 html 목차 태그를 알아보아요 :) ● : 목차 태그 방대한 내용 속에서 서로 연관된 리스팅을 grouping해주기 위한 태그이다. 반드시 부모 태그()를 가지고 있다. 어떤 내용끼리 관련됐는지 그룹화 된 모습이다. 근데 만약 이런 상황이 된다면...? 중간 중간 데이터가 삭제된다면? 다시 넘버링 할 필요는 없다! 짜란 태그를 이용하면 자동 넘버링이 가능하다 * OL: Ordered List UL: Unordered List *

UI/html 2021.02.01

html(5)_ html 태그 (줄 바꿈/단락 변경)

v 경쟁 관계에 있는 태그 2개 배워보기 v 를 해석할 수 있게 되는 포스팅 ● : 줄바꿈 특징은 닫는 태그가 없다는 것이다. ●: 단락 나누기 어디서부터 어디까지가 한 단락인지 구분 가능. 그래서 정보로서는 더 가치있는 html이 된다. 태그는 중복 사용하여 여백을 줄 수 있지만 태그는 그렇지 못하기 때문에 시각적인 자유도 면에서는 떨어지는게 단점이다. *BUT! 시각적 문제는 CSS로 해결 할 수 있으니 태그의 사용을 권장한다. 태그를 이용해 여백주기 (그냥 넘겨도 됩니다) html의 style이란 속성을 이용하면 된다 : 그리고 style이란 속성의 값을 정해줘야 한다. 태그와 태그 사이의 여백을 정하는 값은 margin이라고 하는데 여백을 위에 주고 싶다면 margin-top이라고 정의하면 된다...

UI/html 2021.02.01

html(4)_ html 태그(밑줄 태그, 글자 크기 태그)

html의 태그에 대해 더 알아봐요! 제가 만드는 사이트는 덕질용이라 특정 인물이 등장해요ㅠㅠ 학습 기록용인데 새로 수정해서 올리기에는 비효율적이라 생각해서 그냥 올려요 (+이미지 파일이라 서치가 안되기 때문) ● : 글자 밑줄 u는 underline을 생각하면 쉽게 외울 수 있다. ●~ : 글자 크기 숫자가 커질 수록 글자 크기는 작아진다. ex) 사용법 제목 본문1 본문2

UI/html 2021.01.31

html(2)_ html 에디터 Brackets 다운로드 및 사용법

웹 페이지를 만들기 위해서는 html이라는 프로그래밍 언어를 통해 코드를 만들어야 한다는 사실은 알았다. 그럼 html을 어디에 작성해야 할까? 수 많은 편집기가 존재하지만 그 중 brackets라는 에디터를 골랐다. 사람들이 많이 쓰는게 짱이다! 라는 단순한 생각으로 ㅎㅎ 아래 페이지에서 다운로드 하면 된다. 다운 방법은 다른 응용프로그램들과 크게 다른 점은 없다. 쉽다는 뜻! http://brackets.io/ 우선 컴퓨터에 새 폴더를 생성하고 다운로드 된 brackets을 실행한다. 그리고 새폴더를 열어 준다. 그 다음엔 폴더 내에 파일을 생성해준다. 새파일은 html 형태로 저장해야 하는데 파일명.html 이라고 저장하면 된다. 폴더 내 html파일 만들기까지 성공했다면 코드를 작성할 공책 구입단..

UI/html 2021.01.31

html(1)_ html이란

드디어 미루던 생활코딩 재생에 성공했다. 배운 것을 잊지 않기 위해 기록하려 한다. html이란? 웹 페이지를 만들기 위한 소스(혹은 코드)를 의미 아무 것도 모르는 상태에서 봐도 "꺽쇠를 이용한 표현이 많다" "꺽쇠가 많이 사용된다"정도는 인식할 수 있다. 이 꺽쇠를 우리는 '태그'라고 부른다. 태그는 어떤 단어에 붙어서 해당 단어가 "~하게 되어라"하고 설명하는 존재. html의 태그로는 150여개가 있으나 그 중 25~26개로 구성 된 웹페이지가 가장 많다. 간단한 태그를 하나씩 배워나가며 나만의 웹페이지를 한 번 만들어보겠다.

UI/html 2021.01.31
728x90