프로그래밍/HTML_CSS10 HTML과 CSS파일 분리하기 웹 브라우저에 보이는 화면을 예쁘게 꾸미려면 CSS가 필수이다. CSS를 HTML에 넣는 방법은 3가지로 볼 수 있다. 1. HTML tag에 style 넣기 2. 태그를 사용하기 3. .css 파일을 새로 만들어서 링크 걸기 오늘은 3번 .css파일을 만들어서 링크 거는 방법을 해보려고 한다. .css파일을 따로 만들어서 css에 해당되는 부분을 빼면 HTML코드가 확 줄어든다. index.html파일에는 딱 HTML 코드만 넣는다. 중요한건 style.css파일이 어디에 있는지 위치를 잘 써주어야 한다. 보통은 최상위 폴더 아래 css폴더를 만들고 그 폴더 안에 styel.css파일을 만든다고 한다. 홈페이지의 홈이라고 할 수 있는 index.html 파일도 최상위 폴더 바로 아래 둔다. 힐링여행 로.. 2020. 10. 6. HTML class와 id 비교 1. class와 id란? HTML요소에 '이름'을 붙여주는 방법이다. HTML에 각 요소(element)를 만들어주고 이 요소들을 CSS로 꾸미게 되는데 CSS로 꾸밀 때는 정확히 무엇을 꾸미는지 콕! 찝어주어야한다. 그래서 각 요소에 class 또는 id를 할당해서 이름을 붙여준다. 2. class와 id의 근본적이 차이 class 여러 요소는 같은 이름의 클래스를 가질 수 있다. 한 요소는 여러 클래스를 가질 수 있다. 그래서 같은 이름의 클래스를 가진 요소들에게 한꺼번에 CSS적용이 가능하며, 한 요소에 여러가지 CSS를 적용할 수도 있다. id 여러 요소는 같은 이름의 id를 가질 수 없다. 한 요소는 한 가지 id만 가질 수 있다. class와 다른점은 한 요소가 한 가지 i.. 2020. 9. 23. 자주 쓰이는 CSS 1. 배경 관련 background-color background-image background-size background-position border-raius 2. 사이즈 width height 3. 폰트 font-size font-weight font-family color 4. 간격 margin padding - margin은 요소 외부 여백(요소와 화면과의 여백)을, padding은 요소 내부의 여백을 의미한다. CSS Box Model - margin과 padding 완벽 이해 이 링크를 참고하여 margin과 padding을 살펴보면된다! CSS 연습하기 1) 선택자(selector) 연습 flukeout.github.io/ CSS Diner A fun game to help you lea.. 2020. 9. 23. HTML 부모-자식 구조 , CSS 선택자 HTML 부모 자식 구조 1. 부모 자식 구조의 개념 HTML 요소는 어떤 요소 안에 어떤 요소가 있는가를 파악하는 것이 중요하다. 이런 구조를 부모-자식 구조 또는 트리(tree)구조 라고 한다. 상위에 하위 요소를 감싸고 있는 요소를 부모, 하위에 있는 요소를 자식 이라고 한다. 한 요소를 감싸고 있는 태그가 바뀌면, 그 안에 있는 내용물도 모두 영향을 받는다. ※ 그런데! 부모, 자식 관계는 상대적이어서 부모-자식-손자 이런것 처럼 자식이 다시 부모가 되고 손자가 다시 자식이 될 수 있다. 가족 관계랑 비슷한 느낌! 아래 예시를 살펴보자. 일단 가장 큰 body가 부모라고 보면 login이라는 클래스는 자식이다. 다시 login이라는 클래스를 부모라고 보면 login-title은 자식이 된다. lo.. 2020. 9. 23. HTML 자주 쓰는 태그(Tag) 정리하기 1. 구역을 나누는 태그 1) div : 2) p : 3) ul 또는 ol 그리고 그 안의 li : 나는 영역을 나누죠. 속성을 주어야 눈에 보이는 모양이 달라져요. 나는 문단이에요. p태그는 위,아래로 여백을 자동으로 줍니다. 자동으로 줄 바꿈이 됩니다. ul은 순서가 없는 리스트를 뜻합니다. 순서를 표시하고 싶다면 ol를 씁니다. li는 리스트 아이템입니다. ul이나 ol모두 li가 들어가야합니다. 2. 구역 내 컨텐츠 1) h1 ~ h6 : 2) hr : h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. 숫자가 커지면 제목 크기가 작아집니다. h3은 h2보다 작습니다. h4은 h3보다 작습니다. h5은 h4보다 작습니.. 2020. 9. 22. CSS 적용 순서 1. 완전 똑같은 선택자가 나중에 또 나오면, 이전에 나온 스타일을 덮어쓰게 된다. 나중에 나온 것으로 덮어씌워줘 h1 { color: blue; text-align: center; } h1 { color: green; } 원래는 가운데 정렬에 파란색으로 표시하라고 했지만 나중에 초록색으로 바꿨다. 얘는 결국 가운데 정렬에 초록색으로 나온다. 2. 명시도(specificity) : 같은 요소를 가리키지만 선택자가 다르다면, 명시도에 따라 우선 순위가 결정된다. 명시도 계산 방법 1) 인라인 스타일이 가장 우선 순위가 높다. 2) 선택자에 id가 많을 수록 우선 순위가 높다. 3) 선택자에 class, attribute, pseudo-class가 많을 수록 우선 순위가 높다. 4) 그 다음은 그냥 요소(또.. 2020. 7. 16. CSS Box Model - margin과 padding 완벽 이해 Box Model Box Model은 요소 1개를 기준으로 생각하면 된다. 요소는 실제 내용과 테두리로 이루어져 있다. 그리고 실제 내용과 테두리 사이의 공간인 패딩, 요소와 요소 사이의 간격인 마진이 존재한다. 실제 내용(content) 내용과 테두리 사이 여유공간(padding) 테두리(border) 이 요소와 다른 요소 사이의 간격(margin) margin과 padding만 잘 알아도 웹 페이지를 구성하기에 편리하다. margin은 요소 외부 여백(요소와 화면 여백)을, padding은 요소 내부 여백을 의미한다. 1. Margin 전체 wrap에 margin이 위 아래는 10px 들어가 있고 왼쪽 오른쪽은 auto로 가운데 정렬이다. 전체 요소를 묶은 wrap이라는 요소와 화면과의 여백을 나타낸.. 2020. 7. 9. HTML div와 span 를 사용하면 쭉 이어진 글 중간에서 끊기고 밑에 있는 줄로 넘어간다. span과 div는 요소들을 묶어준다는 공통점이 있다. 차이점은 div태그는 글을 새로운 줄을 놓고 span은 원래 있는 위치에 영향을 주지 않는다. 2020. 7. 8. HTML 폰트 - google 무료 폰트, 내 컴퓨터 폰트, 다운받은 폰트 적용하기 1. 폰트 종류 1)Serif폰트 Times New Roman 궁서체 2) Sans-Serif폰트 Arial 굴림체 3) Monospace폰트 : 프로그래밍 폰트로 많이 쓰임. Courier Courier New 4) Cursive Comic Sans MS Monotype Corsiva 5) Fantasy Impact Haettenschweiler 2. 폰트 설정 방법 1) 폰트가 내 컴퓨터에 이미 설치되어 있는 경우 예를 들어 내 컴퓨터에 Times New Roman이 있을 경우 html에는 따로 써줄 것이 없다. CSS에 font-family를 적어주면된다. font-family에 내가 적용하고 싶은 폰트를 1차로 적는다. 없을 경우 제 2의 폰트인 Times를 사용하도록 적는다. Times사용도 실.. 2020. 7. 8. CSS Text Styling : font-size, font-weight, text-align, text-decoration(폰트 사이즈, 굵기, 정렬 등) 오늘은 가장 기본적인 텍스트 스타일링을 정리해보려한다. '놀면서 배우는 코딩 : 마이크로비트로 정글 탐험하기' 책 홍보 사이트를 만들면서 살펴보려한다. 책 보러 가기 책 홍보 사이트 메인 화면에 들어가는 태그를 한 개 가져왔다. 유튜브에 '놀코'를 검색해보세요! 1. CSS로 스타일링을 해보자. .information{ font-size: 20px; font-weight: bold; } information클래스에 있는 글자들을 스타일링 해주었다. '유튜브에 를 검색해보세요!' 라는 글자들은 폰트 크기 20픽셀, 굵게로 설정되었다. 이번에는 information클래스 중 a태그인 '놀코' 글자를 스타일링 해보자! 텍스트 데코레이션을 없애버렸다. 밑줄, 윗줄, 가운데줄을 없애버리고 아무 효과도 안 준 상태.. 2020. 7. 7. 이전 1 다음
