To go to 뉴질랜드/간식 - IT(코딩) 썸네일형 리스트형 그리드의 기본 사용법 기본 html을 세팅합니다. **각각의 문자에 테두리를 주고, 그것들을 나란히 배치해보겠습니다. 1. 1) : division의 약자입니다. -아무런 의미는 없고 단지 디자인 용도로 쓰입니다. -block level element여서 화면 전체를 씁니다. => NAVIGATION과 ARTICLE이 줄바꿈이 됩니다. 2) 은 태그와 똑같은 목적입니다. 하지만 Inline level element이어서 내비게이션과 아티클의 줄바꿈이 되지 않습니다. 따라서 냐 이냐는 무엇이 필요한지에 따라 사용합니다. 2. 그리드를 알아보기 위해 각각의 태그 부피감을 확실히 알 필요가 있습니다. 이 웹페이지의 모든 div에 이렇게 하면 부피감이 명확해집니다. 3. NAVIGATION, ARTICLE이 나란히 놓이게 하기 위해.. 더보기 BOX model을 이용하여 웹페이지 디자인하기 오늘은 박스 모델을 이용하여 이런 모양으로 만드는 것까지 하겠습니다. 1. 기본적인 박스 모델을 입력합니다. h1{ }태그 안에 border:1px solid gray 속성을 추가합니다. 그랬더니 WEB제목 부분에 기본적인 박스 모양이 생성됩니다. 2. 여기서 WEB아래 부분에만 줄이 나타나도록 해보겠습니다. border-bottom:1px solid gray; 로 border뒤에 밑줄만을 뜻하는 bottom을 추가합니다. 기본 상자 모양대신 WEB밑에 줄만 보이게 되었습니다. 3. 하지만 위치가 애매합니다. 왜 그런지 문제를 파악해보겠습니다. 오른쪽 마우스를 클릭하여 맨 밑에 조사를 클릭합니다. 주황색으로 나타난 margin값이 적당하지 않기 때문입니다. 그래서 margin:0; 으로 값을 넣어줍니다... 더보기 CSS박스모델(border,padding,margin,width) 오늘은 CSS박스모델이라는 것을 실습해보겠습니다. 1. box.html이라는 파일을 생성하여 기본 html을 세팅합니다. 2. CSS을 입력하여 제목 태그를 지정해줍니다. 그러니까 CSS부분만 남기고 줄바꿈이 됩니다. 즉 줄 전체를 쓰고 있다는 뜻입니다. 왜냐하면 제목 태그는 화면 전체를 쓰는 것이 더 편리하기 때문입니다. 3. CSS 제목 부분을 테두리로 둘러싸보겠습니다. 테두리 두께 테두리 컬러 테두리 스타일 (단선) 이라는 뜻입니다. 4. 이번에는 하이퍼링크 처리한 "스타일"부분을 똑같은 태그로 지정해보겠습니다. a{ border-width:5px; border-color:red; border-style:solid; } 로 h1태그부분과 똑같이 태그를 입력했는데도 박스크기가 웹페이지에 나타납니다. .. 더보기 TEXT SIZE(크기), ALIGN(정렬) 및 CLASS, ID 속성 위계관계 1. 이번에는 h1 태그(WEB)를 크게 하고 가운데로 정렬하는 방법을 알아보겠습니다. 이 속성과 속성값을 알기 위해 검색을 해보겠습니다. 검색어는 css text size property 키워드로 검색을 하면 맨 위에 "CSS font-size property-W3Schools"로 들어갑니다. 그럼 font-size 속성에 속성값 크기들의 예가 나옵니다. 이렇게 했더니 heading1의 WEB의 크기가 커졌습니다. 이번에는 WEB을 가운데 정렬로 해보겠습니다. 검색어 css text align property로 구글에서 검색을 해보겠습니다. 가운데 정렬을 할 거니까 center로 하겠습니다. h1{ font-size:60px; text-align:center; } 이렇게 입력하니 위에 보시는 것처럼 W.. 더보기 동영상 삽입/CSS시작 1. ~기능 중 동영상 삽입을 해보겠습니다. 삽입하고 싶은 동영상 페이지로 갑니다. 저는 유튜버 생활코딩님의 동영상을 선택했습니다. "공유"버튼을 클릭합니다. "퍼가기"를 클릭합니다. 동영상 퍼가기의 속성값을 복사합니다. ~ 사이에 동영상 속성값을 붙여넣고 reload를 합니다. 동영상이 삽입이 되었습니다. 2. 이제부터 CSS를 시작합니다. (당연히 HTML을 끝낸 건 아닙니다. 전반적으로 HTML, CSS, 자바스크립트가 뭔지 훑어보고 틀을 잡은 다음 코딩을 자세히 공부하려고 합니다.) HTML만 하면 우리가 만들고자 하는 웹페이지의 디자인이 마음에 안 드는 경우가 많게 됩니다. 글자색을 입히든지, 글자크기를 조절한다든지 우리가 원하는 대로 디자인을 꾸미기 위해 고안된 것이 CSS라고 합니다. 2-1.. 더보기 웹호스팅을 해보려고 하다.(모르겠다ㅠㅠ) 웹호스팅(github pages)하는 거를 해보겠습니다. 수업을 따라가봤으나 모르겠습니다. 다음에 해봐야겠습니다. cf) 웹의 메소포타미아 (priitive web) 주소는 info.cern.ch 라고 합니다. 한번 들어가보겠습니다. 최초의 웹페이지라고 합니다. 오늘 "웹서버 운영하기"까지 들어봤는데 내일 다시 한번 들어봐야겠습니다. IT잘하는 사람들 너무 부럽습니다!!! 찰리푸스 노래 들으면서 아픈 제 마음을 위로해야겠습니다. 더보기 처음으로 "웹사이트"를 만들다. 이제까지 배웠던 html지식을 바탕으로 "웹페이지"를 한 데 모아 "웹사이트"를 만들어보겠습니다. 웹사이트의 양식은 WEB 1.HTML 2.CSS 3.JavaScript 각각의 개념에 대한 정의 로 하여 각 목록을 클릭하면 각각의 웹페이지로 연결이 되도록 하이퍼링크(하이퍼링크수와 같도록 웹페이지 개수를 정합니다.)를 달겠습니다. WEB > > index.html 1.HTML > >1.html 2.CSS >> 2.html 3.JavaScript >> 3.html 이렇게 말입니다. 그럼 지금 만들 웹사이트를 위해 4개의 웹페이지가 필요합니다. index.html이란 웹페이지부터 3.html까지 차례차례 만들어보겠습니다. 1. index.html (웹페이지 이름) WEB이라고 하여 웹페이지 색인에 WEB이 나.. 더보기 html 전체구조 파악하고 "하이퍼링크"까지 해봄. 1. 오늘은 HTML의 구조를 작성하는 방법 및 정말 빈도수가 높은 태그를 살펴봅니다. 1)~이라는 태그입니다. 웹페이지의 제목을 사용자에게 명시적으로 알려주는 기능을 합니다. 검색 엔진과 같은 기계들은 바로 이 이라노 하는 것을, 책으로 치면 책표지와 같은 정보로서 사용합니다. 따라서 타이틀 태그가 있고 없고는 웹페이지 검색률에 상당한 영향을 미친다고 합니다. 적용하는 방법은 웹브라우저의 제목으로 하고자하는 곳에 가서 열리는 곳 닫히는 곳에 ~ 을 입력합니다. 웹브라우저의 타이틀이 html3에서 Through it all로 바뀐 것을 볼 수 있습니다. 2) 이거는 조금 오늘 주제에서 벗어난 것인데요 웹페이지가 영어로 쓰여져 있는데 그 중에 한 부분을 한글로 바꾸고 싶어 아무 태그랑 속성도 사용하지 않고.. 더보기 이전 1 2 다음
