본문 바로가기

언어공부

 (188)
(생활코딩) CSS 박스 모델 (block, inline, border, padding, margin) 박스 모델에 대해서 알아보자. box.html 파일을 새로 만든다. box.html을 열어보면 태그는 화면 전체를 사용하고 있다는 것을 알 수 있다. 여기서 CSS 부분에 태그로 링크를 걸어보자. 태그에서는 화면 전체를 사용하고 있는데, 여기 태그의 경우에는 똑같은 태그임에도 불구하고 줄바꿈이 되지 않고 다른 콘텐츠들과 같은 라인에 위치하고 있다. 이러한 차별은 태그는 제목 태그인데, 제목 태그는 화면 전체를 쓰는것이 기본적으로 더 편리하기 때문이다. 그리고 링크가 앞뒤에 있는 콘텐츠가 줄바꿈이 된다면 상당히 불편하기 때문에 기본적으로 링크는 줄바꿈을 하지 않고 딱 자기의 콘텐츠 크기만큼을 쓴다. 이러한 부분을 시각적으로 확인할 수 있는데 테두리를 그리면 부피감을 알 수 있다. 태그와 태그에 테두리를 줘..
(생활코딩) CSS 속성을 알아내기 /선택자의 기본 여기서 h1태그의 WEB의 텍스트 크기를 조정해보자. 검색어 추천 : CSS text size property 검색되는 페이지에서 font-size속성을 이용하여 텍스트의 크기를 조정하는 것을 알 수 있다. 추가로 h1태그의 WEB을 가운데 정렬 해보자. 검색어 추천 : CSS text center property 검색되는 페이지에서 text-align속성을 이용하여 텍스트의 크기를 조정하는 것을 알 수 있다. 이렇게 검색을 통해서 내가 원하는 속성들을 찾아 쓸 수 있다. 여기서 선택자의 기본에 대해서 알아보자. 일단, 만든 웹페이지에 있는 모든 태그를 검은색으로, 사용자가 방문한 적이 있었던 페이지는 회색으로, 현재 사용자가 머물고 있는 페이지는 빨간색으로 표시해보자. 1.모든 태그를 검은색 선택자를 ..
(생활코딩) CSS의 기본 문법 웹페이지에 CSS를 포함시키기 위해서는 html과 css과 완전히 다른 언어이기 때문에 웹브라우저로 하여금 어디서부터가 어디까지가 css인지 알게해줘야 한다. 바로 style이라는 태그가 해당 역할을 하게된다. 이외에 한가지 방법이 있는데, 태그가 아닌 속성을 이용하는 방법이 있다. 1. 태그 사용 a{} =>선택자(selector) / color:red => 선택자에게 지정되는 효과 및 선언(declaration) / color => 속성(property) / red : property value 2. style 속성 사용 style태그를 직접 사용한 경우에는 태그가 위치하고 있는 태그에게 효과를 줄 것이기 때문에 선택자가 필요없다. style이라는 속성을 쓰면 그 속성의 값을 웹브라우저는 css의 문..
CSS (Cascading Style Sheets)란? CSS (Cascading Style Sheets) 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. CSS가 생겨 HTML에..
(생활코딩) HTML 링크 걸기 <a> 태그가 웹의 왕국이라면 태그는 왕국의 제왕이다. 현대의 HTML은 150여 개 태그로 이루어져 있지만, 이들 모두 태그 아래에 있다. 검색 엔진들은 태그 덕분에 전 세계의 웹을 항해하면서 웹 페이지를 발견할 수 있고, 태그가 없다면 검색엔진은 존재하지 않는다. HyperText가 바로 이 태그를 의미 하며, anchor의 첫 글자를 띈 이다. achnor는 배가 정박할 때 사용하는 덫을 의미이다. 정보의 바다에 정박한다는 의미일 수 있다. 태그는 링크의 기능을 한다. 작성한 글 중 HTML에 공식 사용 설명서의 링크를 걸어보도록 하자. "html specification"로 검색 했을 때, HTML을 만드는 W3C라는 국제기구에서 만든 공식 설명서를 찾는다. 해당 링크를 복사 한 후, 링크 할 부분 (h..
(생활코딩) HTML 문서의 구조 <!doctype html>,<html>, <title>, <head>, <body> HTML 제목을 태그를 사용해 입력해보자. 태그는 웹페이지의 제목을 사용자에게 명시적으로 알려줄 수 있을 뿐만 아니라, 검색 엔진과 같은 기계들은 바로 이 태그를 책으로 치면 책 표지와 같은 정보로 사용한다. 에디터에 웹브라우저 좌측 상단에 문서제목을 표시 작성 후 저장해준다. 웹페이지를 불러오면 지정 제목으로 이름이 변경된 것을 볼 수 있다. 또 에디터에 한글을 입력하면 웹페이지에 깨질 수 있는데 파일 형식을 지정 안해줬기 때문이다. 해당 에디터에서 작성하고 있는 파일은 utf-8로 저장되어 있으므로, 해당 파일을 웹브라우저가 열 때도 utf-8로 열도록 지정해줘야 한다. 여기서 본문과 본문을 설명해주는 부분(title과 meta charset)이 나뉘어 지는데 이부분을 본문로 작성해줘야 한다. HTM..
(생활코딩) HTML 부모자식과 목록 <li>, <ul>, <ol> 이제 HTML, CSS, JavaScript에 대한 목차를 만들어보자 에디터에 목차이름을 작성하고 저장한 후, 웹페이지를 열어보면 위와 같이 나온다. 여기서 태그로 줄을 바꿔주자. 에디터에 을 작성하고 저장한 후, 웹페이지를 새로고침하면 위와 같이 줄바꿈이 된 것을 확인할 수 있다. 여기서, HTML을 만드는 사람들은 목차(목록)를 쓸 때 사용하라고 어떤 태그를 고안했다. 바로 list로 태그를 사용하면 된다. 전에 입력했던 태그를 지우고 태그로 작성해보자. 에디터에 을 작성하고 저장한 후, (여기서 ctrl을 누른상태에서 동일한게 입력하고 싶은곳에 커서를 클릭하면 클릭한 곳에서 동시다발적으로 똑같은 내용을 입력가능하다. (Mac인 경우에는 command)) 웹페이지를 새로고침하면 목차가 생성된다. 여기..
(생활코딩) HTML 이미지 삽입 img, 속성 HTML에서 이미지를 삽입해보자. 이미지 "www.unsplash.com" 에서 찾아보기 해당 상태에서는 이미지가 너무 큰 것을 확인할 수 있다. 여기서 이미지 사이즈를 조정하려면 여기서 색칠된 부분을 속성(Attribute)라고 한다. 위치 및 순서는 상관이 없으며, 태그가 태그의 이름만으로는 정보가 부족할 때 이런 속성을 통해서 더 많은 의미를 부가할 수 있게 된다.

티스토리툴바