올리비아 코딩스쿨

외부 CSS 한 페이지 내부에서뿐만 아니라, 여러 웹페이지 모두 일관된 CSS 코드가 적용되도록 만들어보자. 1. 새로운 폴더 만들기 폴더이름: css 2. 새로운 CSS파일 만들기 파일이름: styles.css 3. css파일에 CSS코드 적기 css파일, 이 한 곳에서 변경한 모든 사항이 모든 웹페이지에 영향을 미치도록 만드는 것이다. styles.css body { background-color: grey; } hr { border-style: none; border-top-style: dotted; border-width: 5px; border-color: blue; width: 30%; height: 50px; } 4. 새로운 링크 만들기 head 부분에 link 코드를 적는다. href에 연결..

내부 CSS css를 한 페이지 '전체'에 적용할 수 있는 방법을 소개한다. 1. head 부분에 코드를 작성하기 코드는 head, body, foot으로 전체를 세 등분 할 수 있는데, 여기서 head에 스타일 속성을 넣으면, 전체에 일괄 적용된다. HTML 코드 을 적고, 그 안에 body { }를, 그 안에 적용할 속성을 입력한다. 아래의 예시는 배경색깔을 기본에서 lightcyan 색으로 바꾸었다. 2. 모든 웹사이트는 이미 style 되어 있다는 사실! 위에서 body의 배경색깔을 바꾼 방법과 동일하기 head 부분에 hr의 컬러를 바꾸면, 아무런 변화가 없다. 왜냐하면 모든 웹사이트에는 이미 기본 CSS가 적용되어 있기 때문이다. 구체적으로 속성을 바꾸고 싶다면 기본 CSS가 어떻게 적용되어 ..

CSS Cascading Style Sheet 캐스케이딩 스타일 시트 CSS는 혼자서는 존재할 수 없다. HTML 같은 마크업언어와 같이 쓰이며, 웹사이트를 멋진 스타일로 꾸며주는 일을 한다. 물론 CSS를 사용하지 않고 HTML 코드와 속성만으로 어느정도 웹사이트를 꾸며줄 수 있지만, 그 확장 범위가 제한적이고 아주 간단한 것을 실현하는데도 코드가 장황해질 수 있다는 단점이 있다. CSS는 웹사이트를 세련되고 정돈되게 만들어준다. 이번 장에서는 CSS를 이용해서 웹사이트를 멋지게 스타일링해본다. 그 중 첫 번째 시간으로 배경색깔을 바꾸는 방법 소개한다. 배경색깔 바꾸기 body 태그는 현 웹사이트 페이지 전체 모습이라 생각해도 무방하다. 따라서 body의 배경색깔을 바꿔줌으로서 전체의 배경색깔을 입혀주..

github를 이용해서 웹사이트에 무료 호스팅을 하는 방법을 알아보자. 1. 깃허브 접속하기 깃허브 계정만들기> Free plan(무료) 선택하기>이메일인증 깃허브 바로가기 ------>클릭 2. 새로운 저장소 추가 우측 상단의 +버튼 클릭> New repository(새로운 저장소) 클릭 3. 새로운 저장소 만들기 repository name 이름 붙이기> Public 공개설정 앞으로 만들고, 수정하는 모든 파일을 해당 이름(repository name)의 폴더에 저장된다. 4. readme로 저장소 초기화하기 Add a README file 클릭> Create Repository 저장소 생성하기 클릭 create repository를 누르면 아래와 같은 화면이 나온다. 저장소가 생겼다는 것이고, 저장..

HTML form 태그는 웹사이트 사용자들이 입력한 값을 모으는 기능을 구현한다. attribute 속성: action, method 1) action action 속성 뒤에는 형식이 제출되었을 때 일어나는 일이 나온다. 대부분 이 form data가 어디로 가는지 목적지를 밝히는 경우가 많다. 목적지는 절대경로, 상대경로로 적는다. 참고로 action="." or action ="#"은 현재 페이지, 현재 파일, 현재 디렉토리로의 이동을 말한다. 한편, action="MAILTO:이메일주소" 라고 적는 경우가 있다. HTML에서 mailto는 이메일로 연결하는 것이다. 제출 버튼을 누르면 아래의 이메일로 연결된다. 보낸 사람은 사용자의 이메일 주소이며, 받는 사람은 아래의 코드에서 mailto 옆에 적..