TIL/HTML (10) 썸네일형 리스트형 [HTML] HTML 기본 다지기 2020.09.01 HTML 공부 정리 'HTML5+CSS3 웹 표준의 정석' - 고경희, 이지스퍼블리싱을 보고 공부, 정리합니다. p.14 / 01. HTML 기본 다지기 오늘의 목표 웹 문서의 특징에 대해 알아본다. 프론트엔드와 백엔드에 대해 간단한 예시로 알아본다. HTML과 웹 표준, HTML의 기본 문서 구조에 대해 알아본다. 웹 문서의 특징 문서를 작성하는 프로그램과 그 내용을 보는 프로그램이 서로 다르다. 웹 편집기 웹 브라우저 (익스플로어, 크롬...) 문서 작성 문서 내용 확인 프론트엔드와 백엔드 (ex) 회원가입 회원가입 화면 - 프론트 엔드 HTML CSS JavaScript 정보 입력 후 회원가입 버튼 눌렀을 때 정보가 서버 컴퓨터로 전달, 데이터베이스에 저장되는 과정들 - 백엔드 .. [생활코딩] 링크 태그 : <a> 2020.07.27 오늘의 공부 생활코딩을 공부하며 정리 중 WEB1 - 14. HTML 태그의 제왕 https://opentutorials.org/course/3084/18418 HTML 태그의 제왕 - 생활코딩 우리는 지금까지 문서를 만드는 방법을 충분히 자세히 살펴봤습니다. 태그를 결합하는 방법을 완전히 마스터했고, 빈도수가 절대적으로 높은 태그들을 살펴봤습니다. 앞으로 배울 것 보다, 지�� opentutorials.org 링크 태그 : 다른 페이지로 연결해주는 링크 태그 속성이 필요하다. 링크 태그의 속성 href="연결할 주소" 이게 있어야 링크를 연결해준다. " " 안에 주소를 입력한다. target="_blank" 새 창으로 열림. title="설명" 링크에 마우스를 가져다 댈 때 나올 설.. [생활코딩] HTML의 기본 구성 요소 2020.07.27 오늘의 공부 생활코딩으로 공부하며 정리 중 WEB1 - 13. 문서의 구조와 슈퍼스타들 https://opentutorials.org/course/3084/18409 문서의 구조와 슈퍼스타들 - 생활코딩 --- 우리는 HTML의 문법을 마스터했다고 말씀드렸습니다. 말하자면 문장을 만드는 방법을 마스터했다고 할 수 있습니다. 더 복잡한 것은 단언컨대 존재하지 않습니다. 문장이 모이면 무엇이 되나 opentutorials.org HTML의 기본 구성 요소 태그 위에 관용적으로 쓰는 태그 "이 문서는 html이다." 라는 뜻 본문 ( )를 설명하는 태그 태그는 웹페이지의 이름을 나타낸다. 태그는 인코딩을 나타내는 태그. 웹 브라우저는 UTF-8로 파일을 열기로 약속되어 있다. 따라서 이 문.. [생활코딩] 부모 자식 태그와 목록 태그 : <li>, <ul>, <ol> 2020.07.27 오늘의 공부 생활코딩으로 공부하며 정리 중 WEB1 - 12. 부모 자식과 목록 https://opentutorials.org/course/3084/18408 부모 자식과 목록 - 생활코딩 --- 이번 시간에는 태그 간의 관계를 나타내는 표현인 부모(parent),자식(child)에 대해서 알아보겠습니다. 아래 코드를 보시죠. (저런 이름의 태그는 없습니다) parent 태그에 대해서 child 태그를 자식 opentutorials.org 태그의 부모 자식 관계란? 예를 들어, A라는 태그와 B라는 태그가 있다. 여기서 부모 태그는 A, 자식 태그는 B이다. 즉, 어떤 태그를 감싸고 있는 태그를 부모 태그, 안에 있는 태그를 자식 태그라고 한다. 목록 태그 : 자식 태그이다. 자동 줄.. [생활코딩] 이미지 태그 : <img> 와 속성 2020.07.27 오늘의 공부 생활코딩으로 공부하고 정리 중 WEB1 - 11. 최후의 문법 속성 & img https://opentutorials.org/course/3084/18407 최후의 문법 속성과 img - 생활코딩 --- 지금까지 가장 중요한 문법인 태그를 배웠습니다. 이번 시간에는 태그의 심화된 문법인 속성(attribute)을 배우게 될 것입니다. 이것까지 배우면 HTML의 기본 문법을 완전히 마스터한 것이 됩니�� opentutorials.org 이미지를 넣는 태그 : 닫는 태그 필요 없다. (ex) 사용하지 않는다. 이미지 태그는 속성을 필요로 한다. 속성 태그 이름만으로는 내가 나타내고자 하는 정보를 나타내기 어려울 때가 있다. 그럴 때 태그 안에 속성을 사용하여 정보를 나타낸다... [생활코딩] 줄바꿈 태그 : <br> vs <p> 2020.07.27 오늘의 공부 생활코딩으로 공부하며 정리하는 글 WEB1 - 9. 줄바꿈 : br vs p https://opentutorials.org/course/3084/18403 줄바꿈 - 생활코딩 --- 이번 시간에는 인기있는 태그 두 가지를 살펴볼 거에요. 이 두 태그는 서로 경쟁관계에 있는데요. 어떤 경쟁관계에 있는가를 통해서 정보로서 웹이라는 관점에 대해서 생각해 봅시다. 또 CSS�� opentutorials.org HTML의 줄바꿈 특징 HTML은 엔터로 줄 바꿈을 해도 결과는 줄 바꿈이 일어나지 않는다. 예제 HTML에서 새로운 줄을 표현할때 사용. 즉, 줄바꿈 태그 끝맺음 태그를 사용할 필요 없다. (ex) 는 사용하지 않는다. 두 번 쓰면 단락으로 표현할 수 있다. 단락을 표현하.. [생활코딩] 제목을 나타내는 태그 : <h1>...<h6> 태그 2020.07.27 오늘의 공부 생활코딩으로 공부하며 정리하는 글 생활코딩 WEB1 - 7. 혁명적인 변화 https://opentutorials.org/course/3084/18400 혁명적인 변화 - 생활코딩 --- 제가 오랜 시간 공부에 대해서 오해한 게 있습니다. 중요한 것은 어렵고 쉬운 것은 사소하다는 것입니다. 이렇게 생각하게 된 이유가 무엇인지 가만히 생각해 보니까 쉬운 것은 시험에 나오�� opentutorials.org 제목을 나타내는 태그 : ... 태그 ... 숫자가 커질수록 글자가 작아진다. 줄 바꿈 태그를 사용하지 않아도 자동 줄 바꿈 까지만 있다. ( 없음) 예제 소스코드 결과 [생활코딩] 강조를 위한 태그 : <strong>, <u> 2020.07.27 오늘의 공부 생활코딩을 보며 정리하는 글입니당 생활코딩 WEB1 - 6. 기본 문법 태그 https://opentutorials.org/course/3084/18392 기본 문법 - 태그 - 생활코딩 --- 이제부터 진짜로 코딩을 해보겠습니다. 먼저 우리가 만들었던 기획서를 다시 보시죠. 이런 모양의 웹페이지를 한 번에 만들수는 없습니다. 조각조각 구현하면서 전체적으로 완성해 나가면 �� opentutorials.org 태그 강조를 위한 태그 글자가 진하게 표시된다. 태그 u는 underline의 뜻 text 밑에 밑줄이 생긴다. 예제 소스코드 결과 이전 1 2 다음
