생활코딩 HTML + CSS + 자바스크립트27 09 줄바꿈 : <br> vs. <p> 자주 사용하는 인기 태그 두가지가 있다. 이 두 태그는 서로 경쟁관계에 있다. 1. 위와 같이 단락을 구분하면서 문장을 구성했는데, 웹 페이지에서 본다면 ? 단락 구분이 되어 있지 않은 모습을 확인할 수 있다. 엥 그러면 어떻게 하지 ? 줄 바꿈을 하는 태그를 사용 해야 한다. 추천 검색어 >> html new line tag 검색을 통해, 줄바꿈은 HTML 에서 이라는 태그를 사용한다는 것을 알 수 있게 됬다. 을 한번만 사용하면, 한줄이 떨어지는 것이고, 단락 구분을 하기 위해서는 을 두번 사용하면 된다. 입맛에 맞게 태그를 1번 ~ 2번 ~ 3번 등 본인이 선택해서 사용하면 된다. 2. 태그는 닫는 태그가 존재하지 않는다. 단순 줄바꿈이라는 시각적인 의미만 갖는 태그이기 때문에 감쌀 필요가 없어서 .. 2023. 6. 25. 05 혁명적 변화 ~ 06 CSS 속성을 스스로 알아내기 04장에서, 웹 페이지에 CSS를 삽입하는 방법을 알아봤다. 1. [ CSS 문법 ] 와 같이 있다면, a는 선택자를 의미 한다. (Selector) >> 이 웹 페이지의 모든 a태그를 선택한다는 의미로 선택자라고 한다. color : blue; 는 선언 했다. 라고 말할 수 있다. 또는 효과라고도 한다. (번역의 차이.. 표현법의 차이. 중요하지 않음) (Declaration) >> 선택자가 지정한 태그에 대해 어떤 효과를 줄 것인가를 보여주는 부분을 선언 했다 라고 한다. color는 속성이다. (Property) >> color 속성을 의미한다. 속성은 굉장히 다양 하게 존재 한다. red는 값이다. 속성값이라고 할 수 있다. (Value) >> 속성에 대한 값을 속성값 이라고 한다. == 프로퍼티.. 2023. 6. 25. 04 CSS의 기본 문법 CSS >> Cascading Style Sheet (종속형 시트) (캐스케이딩 스타일 시트) 1. 03장에서 말했듯이, HTML과 CSS는 완전히 다른 언어이므로, 웹 페이지에 CSS를 포함시킬 때는 웹 브라우저로 하여금 어디서부터 어디까지가 CSS 인지를 알려줘야 한다. 2. 태그가 그런 역할을 한다. 다른 방법으로는 태그를 통하는 것이 아니라, 속성을 이용하는 방법 이다. 3. 위와 같은 코드로는 웹 브라우저 입장에서, color:blue 부분이 HTML인지 ? CSS인지 알 수 없다. 그래서, HTML과 CSS를 만든 사람들은, 위 태그에 대해 CSS 효과를 주고 싶으면 style 이라는 속성을 사용하기로 약속 했다. style = "color:blue" 를 하게되면, 페이지의 CSS 라는 글자가.. 2023. 6. 25. 03 CSS의 등장 0. 웹을 만든 사람들은 웹 페이지를 아름답게 만드는 방법에 대한 깊은 고민에 빠진다. 두가지 갈림길에 서게 된다. 1) 쉽지만 한계가 있는 방법. 2) 어렵지만 근본적인 해결책인 방법. 이미 존재하는 언어였던 HTML 언어에 디자인과 관련된 새로운 태그를 추가해서 사용 하는것이 1) 이다. 디자인에 최적화된 완전히 새로운 언어를 만드는 것이 2) 이다. 처음에는 1)을 선택해서 사용하다가, 한계를 깨닫고 어렵지만 근본적인 해결책을 결국 찾게 된다. 그게 바로 CSS 이다. 1. 웹 브라우저가 처음 나왔을 때 웹 브라우저는 HTML 언어만 해석해서 처리하는 프로그램 이였다. 따라서, 웹 브라우저는 기본적으로 코드를 HTML 이라고 생각 한다. CSS는 HTML과는 완전히 다른 컴퓨터 언어 이다. 그래서,.. 2023. 6. 25. 01 수업 소개 ~ 02 CSS가 등장하기 전의 상황 1. 웹이 처음 세상에 등장했을 때, 단 하나의 기술만이 존재했다. == HTML. HTML을 이용하면, 전자문서를 만들 수 있었다. 즉, 컴퓨터를 통해 정보를 표현할 수 있게 됬다. 이 정보를 인터넷을 통해 전 세계의 누구나 볼 수 있게 할 수 있게되서, 당시로서는 혁명적인 사건이였다. 자연스럽게 사람들은 웹에 열광했다. 하지만, 사람의 욕심은 끝이 없어서, 처음에는 HTML을 이용해 문서를 만들 수 있게 된 것으로도 행복했지만, 곧 여러가지 불평들이 나오게 됬다. 2. 수많은 불평들 중, 아름다우면서 보기 좋은 형태로 만드는 방법에 대한 부분을 정리 하겠다. CSS가 왜 등장할 수 밖에 없었는지를 위의 글로 알 수 있게 되었다. 3. 문서의 글꼴을 변경 하고 싶어. 문자의 크기를 변경 하고 싶어. 문.. 2023. 6. 20. 08 통계에 기반한 학습 1. 최신 버전의 HTML에는 150개 이상의 태그가 있다. 150개 이상의 태그를 다 외워야 할까 ? >> XXX 어느상황에 무엇을 쓰고 싶다라는 생각만 있으면, 검색을 통해 원하는 태그 언어를 찾아서, 사용하면 그만이다. 2. 자주 사용되는 태그언어 25가지. : HTML 문서의 제목을 정의하는 데 사용 된다. : HTML 문서에 대한 메타데이터를 제공 한다. : 다른 HTML 요소를 함께 그룹화 하는데 사용되는 컨테이너 요소이다. : HTML에서 하이퍼링크를 담당. 특정 위치로 이동하기 위해 클릭할 수 있는 앵커(링크)를 정의. : HTML 문서 내에 JavaScript 코드를 포함 또는 참조하는데 사용. : 현재 HTML 문서와 스타일시트 또는 아이콘과 같은 외부 리소스 간의 관계를 정의. : H.. 2023. 6. 20. 07 혁명적인 변화 1. 태그가 무엇일까 ? h 뒤에는 숫자가 붙고, 숫자가 올라갈수록 글씨가 작아진다. h와 숫자가 나오는 태그를 쓰면 일반적인 텍스트보다는 글씨가 더 두껍다. heading은 제목이라는 뜻이다. 부터 은 제목을 나타내는 태그 이다. 부터 까지 존재하고, 부터는 없다. 2. 태그를 이용해 제목 만들기. 2023. 6. 20. 06 기본 문법과 태그 1. html 파일 생성 후 텍스트를 입력. 에디터에 작성한 내용이 원인으로 작용해서, 브라우저의 웹 페이지가 만들어진다. 에디터에 작성된 내용은 코드나 소스, 좀 더 구체적으로 설명하면 HTML이라는 프로그래밍 언어의 문법에 맞게 작성된 코드나 소스 이다. 그 결과인 웹 페이지가 브라우저에 표시 되는 개념 이다. 2. 에디터에 위와 같이 작성. 브라우저를 새로고침하면 에디터에 작성한 내용이 원인으로 작용해서, 브라우저의 웹 페이지가 만들어진다. 3. creating web pages 문자를 진하게 표시하고 싶다면 ? 웹을 지배하는 가장 중요한 문법을 사용 해야 한다. >> 태그(tag) 언어 태그로 굵게 강조. 4. web이라는 텍스트 밑에다가 밑줄을 치고 싶다면 ? 밑줄은 영어로 underline 이.. 2023. 6. 20. 05 HTML 코딩과 실습 환경 준비 1. 해당 파일을 다운로드 하여, 설치 진행 2. 설치 3. 디렉터리 폴더 생성 웹 사이트 제작 프로젝트에 사용되는 파일들을 모두 web 이라는 폴더에 넣을 예정. 4. File > Open Folder 5. 만들어 놓은 web 폴더로 디렉터리 지정. 6. File > New File 7. 그러면 해당 폴더에 이름.html 파일이 저장 된다. 8. 잘 됬는지 확인하기 위해 아무 단어를 타이핑 하고, 이름.html을 실행 한다. 9. 홈페이지가 잘 뜨고, 타이핑한 단어가 잘 뜨면 성공. 2023. 6. 20. 이전 1 2 3 다음