언어공부/HTML (14) 썸네일형 리스트형 (생활코딩) HTML 부모자식과 목록 <li>, <ul>, <ol> 이제 HTML, CSS, JavaScript에 대한 목차를 만들어보자 에디터에 목차이름을 작성하고 저장한 후, 웹페이지를 열어보면 위와 같이 나온다. 여기서 태그로 줄을 바꿔주자. 에디터에 을 작성하고 저장한 후, 웹페이지를 새로고침하면 위와 같이 줄바꿈이 된 것을 확인할 수 있다. 여기서, HTML을 만드는 사람들은 목차(목록)를 쓸 때 사용하라고 어떤 태그를 고안했다. 바로 list로 태그를 사용하면 된다. 전에 입력했던 태그를 지우고 태그로 작성해보자. 에디터에 을 작성하고 저장한 후, (여기서 ctrl을 누른상태에서 동일한게 입력하고 싶은곳에 커서를 클릭하면 클릭한 곳에서 동시다발적으로 똑같은 내용을 입력가능하다. (Mac인 경우에는 command)) 웹페이지를 새로고침하면 목차가 생성된다. 여기.. (생활코딩) HTML 이미지 삽입 img, 속성 HTML에서 이미지를 삽입해보자. 이미지 "www.unsplash.com" 에서 찾아보기 해당 상태에서는 이미지가 너무 큰 것을 확인할 수 있다. 여기서 이미지 사이즈를 조정하려면 여기서 색칠된 부분을 속성(Attribute)라고 한다. 위치 및 순서는 상관이 없으며, 태그가 태그의 이름만으로는 정보가 부족할 때 이런 속성을 통해서 더 많은 의미를 부가할 수 있게 된다. (생활코딩) HTML 줄 바꿈 : <br> vs <p> "html new line tag"로 줄 바꿈에 대한 태그를 알아보자. : 한 줄을 바꿔준다. (단일 태그) 을 n번 입력할 수록 n줄을 나눠준다. "html paragraph tag"로 단락을 나누어 주는 태그를 알아보자 단락나눌부분 : 단락을 나누어 준다. 는 정해진 여백만큼만 단락이 나뉘어진다. 여백을 정하지 않으면 default값으로 여백이 생기고, 여백을 지정해주려면 p태그 안에 를 입력(px안에 원하는 값 입력)해준다. (여기서부터는 css내용) 태그와 태그사이의 여백=margin 으로 표현하며, margin만 입력시 상하좌우로 45px 떨어진다. 윗부분만 여백을 주고 싶을 때는 를 입력해준다. (생활코딩) HTML 기본문법 태그 (<strong> / <u> / <h1>~<h6>) 여기서 creating web pages 부분을 강조하고 싶으면 해당 문구 사이에 강조하고 싶은 문구입력 여기서 web 부분에 밑줄을 치고 싶으면 해당 문구사이에 밑줄 칠 문구입력 (u=underline) 여기서, 강조하고 싶은 문구에서 = 열리는 태그, = 닫히는 태그 라고한다. (둘다 태그) 여기서 ~에 대해서 알아보자면 6단계의 구획 제목을 나타낸다. 단계는 이 제일 높고, 이 제일 낮다. 접근성을 고려하여 제목은 순차적으로 해야한다. 하위 구획으로 제목을 중첩해 콘텐츠의 구조를 나타낼 수 있다. (생활코딩) HTML 코딩과 실습환경 준비 준비물 - 웹브라우저, 코드 작성 프로그램 에디터 ATOM(window - 메모장 / mac -textedit / linux-gedit등 외에 다른 에디터 사용 가능) > 최신 에디터 검색 원할 시 best HTML Editor 2021 로 검색 ATOM 에디터 주소 : https://atom.io에서 에디터 설치 A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see .. HTML (HyperText Markup Language)이란? HTML (HyperText Markup Language) 인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류. 하이퍼 텍스트를 작성하기 위해 개발되었다. (1989년 영국의 컴퓨터 과학자인 팀 버너스 리에 의해 고안되어 1991년에 최초 공개) http://info.cern.ch 수동작업 동적 웹 페이지 (Dynamic web page) : 서버에 있는 데이터들을 가공한 후 사용자에게 전달되는 웹페이지. (정적 웹페이지와는 반대.) 상황 및 시간에 따라 달라지는 웹페이지. (ex. 실시간 검색순위, 댓글, 검색 등 내용이 변하는 페이지) 장점 : 다양한 서비스, 추가&수정&삭제 수월 / 단점 : 작업시간이 많이 소요됨. 이전 1 2 다음
