AngeRay

CSS 파일 연결과 스타일을 적용하는 다양한 방법 프로그래밍을 할 때 반복적인 코드는 되도록 피하는 것이 좋다. 반복적인 코드 작성을 피하기 위해 CSS를 style 태그안에 작성하는 것이 아닌 CSS 파일을 만든다. 우선 CSS 파일들을 모아 놓을 수 있는 폴더를 하나 만든다. CSS 폴더 안에 CSS파일명.css 으로 작성한다. 확장자는 .css 이다. HTML 파일과 CSS 파일을 연결시켜 주려면 태그를 사용해야 한다. 태그는 태그 안에 작성한다. href 속성은 연결시켜 줄 파일의 주소를 써준다. rel(relationship) 속성은 이 페이지와 이 파일과의 관계를 알려준다. 즉 CSS 파일은 HTML 페이지의 stylesheet 이다. 스타일을 적용하는 다양한 방법 HTML 코드에 스타일을 입..

div 태그 div 태그 요소들을 묶을 수 있는 HTML 요소가 div 태그 이다. 묶어주고 싶은 요소들을 div 태그로 감싸면 된다. div 태그는 요소들을 묶어주는 거 외에는 딱히 기능이 없다. 기능이 없는 대신에 굉장히 유연하고 다양한 방식으로 쓰이기 때문에 계속 사용하면서 연습을 해야 한다. 딱히 기능이 없는 태그 이기때문에 원래 여백을 가지고 있지 않다. block level element 이며 item을 감싸는 box 역할을 한다.

클래스(class) 와 아이디(id) HTML 요소에게 '이름'을 주는 방법은 두 가지가 있다. 클래스(classs) 아이디(id) 클래스(class) class 이름을 사용해서 태그를 스타일링을 할 수 있다. class는 일종의 이름과 같은 역할을 한다. CSS에서 스타일링을 할때, class 이름이란 걸 표시하기 위해서 점(.)을 쓰고 class 이름을 쓰면 된다. class를 사용하면 여러 요소들에게 같은 스타일을 입힐 수 도 있고 한 요소에 다양한 스타일을 동시에 입힐 수 있다. 클래스를 잘 활용할 줄 알아야 한다. 아이디(id) id를 통해서 스타일링을 해 줄 수 있다. CSS에서 스타일링을 할때, id 라는것을 표시하기 위해서 샵(#)을 붙힌다. 클래스와는 무슨 차이가 있을까? 클래스(clas..

px 과 % px(픽셀) HTML에서 무언가의 크기를 설정할 때는 기본적으로 픽셀 단위를 사용한다. 픽셀은 화면을 구성하는 기본 단위 이다. 어떤 이미지의 일부를 확대해서 보면 작은 정사각형 단위로 되어 있다. 각 정사각형을 픽셀이라고 부른다. 만약 어떤 이미지의 가로 길이가 100px로 설정되어 있다면, 가로로 저 작은 정사각형이 100개가 있다는 의미이다. 폰트크기도 픽셀로 설정하는 경우가 많다. 만약 폰트 크기가 24px로 설정되어 있다면 폰트의 세로 길이가 24px 이라는 뜻이다. %(퍼센트) 길이를 픽셀 말고 퍼센트로 설정할 수도 있다. 퍼센트로 크기 설정 시 부모태그를 기준으로 정한다.

태그 태그 이미지를 넣기 위해서는 태그를 사용하면 된다. img 태그는 불러오기 위한 용도 이기 때문에 meta 태그 처럼 시작 태그는 있지만 종료 태그가 없다. 이미지는 확장자를 잘 생각하고 삽입해야 한다. 비트맵은 웹에서 사용불가 하다. 이미지는 외부에서(인터넷) 가져올 수 도있고, 내부 파일에 다운받아서 가져올 수 도 있다. 외부에서 가져올 시 이미지 주소 복사를 클릭 후 가져온다. 이미지 삽입 시 자동 왼쪽 정렬 되어 있다. 이미지를 가운데 정렬하는 방법 img { display: block; margin: 0 auto; } 태그의 속성 src : 사진이 있는 주소 입력 alt : 이미지가 뜨지 않았을 시 에 대체할 대체텍스트를 반드시 입력해주어야 한다. width : width 라는 속성을 써서..

tag tag 다른 페이지로 가는 하이퍼링크(Anchor)를 만들기 위해서는 태그를 사용하면 된다. HTML 태그에는 속성(attr)을 추가적으로 써 줄 수 있다. 태그의 속성(attr) content 작성 href 라는 속성을 갖는다. 가고 싶은 주소(url 입력 시)에는 'https:://' 를 반드시 작성한다. target="_blank" : 외부 페이지를 가는 링크를 새페이지에서 열라는 속성 target="_blank"는 반드시 title="새창"과 같이 사용한다. title은 해당 페이지의 설명문구를 작성한다. 가고 싶은 주소에 내부페이지 주소를 작성하면 내부페이지 이동이 가능하다. 내부페이지로 이동하기 위해서는 상위폴더와 하위폴더 개념을 알아야 한다. 상위폴더로 이동 시 ../ 를 작성한다. ..

옵셔널 태그_head, body, html 태그 , , 이 세 태그는 필수 태그가 아니라 '옵셔널 태그' 이다. 그렇다면 이 태그들은 꼭 써야할까? 정리의 목적으로 세 태그를 모두 사용한다. 요소들을 와 에 묶어주면 html 파일의 구조가 눈에 더 잘 들어온다고 생각하기 때문이다. 하지만 세 개의 옵셔널 태그의 사용을 권장하지 않는 의견들도 있다. 심지어 구글 HTML/CSS 스타일 가이드 에서도 옵셔널 태그를 생략하라고 나와 있다. 태그 태그는 우리 페이지에 나올 내용을 감싸 주는 역할을 한다. 실제로 페이지에 나오는 내용 이다. 태그 태그에는 제목 태그, 태그, CSS, JavaScript 등 내용 외 많은 것들이 태그 안에 들어간다. 태그 태그 사이에는 전체 코드를 넣어준다. 이 사이에 있는 건 모..

기본 CSS 속성 정리 우리가 만든 사이트에 스타일을 입히기 위해 CSS를 사용한다. HTML은 사이트에 들어갈 내용을 담고, 이 내용을 스타일링 하는 것은 CSS 이다. 사이트에 CSS 스타일을 입혀주기 위해서 태그를 사용 한다. 태그 사이에 CSS 코드를 써주면 사이트에 스타일이 반영된다. CSS 기본문법 스타일링 하고 싶은 요소 { 바꾸고 싶은 속성: 원하는 속성 값; } 속성값은 들여쓰기로 작성하고, 콜론(:) 뒤에만 띄어쓰기를 한 칸 해주고 세미콜론(;)을 꼭 작성한다. 폰트 크기 CSS에서 폰트 크기를 표현할 수 있는 단위 몇 가지가 있는데, 그 중 픽셀(px)이 가장 많이 사용된다. ex) h1 { font-size: 24px; } 텍스트 정렬 글은 왼쪽, 가운데 또는 오른쪽으로 정렬할 수 ..

코딩 할 때 한글이 깨지는 이유는 뭘까? 한국말이 제대로 나오기 위해서는 한글을 인식하는 인코딩 방식을 사용해야 한다. 한국말을 어떤 브라우저를 쓰든 항상 안 깨지도록 하기 위해서는 직접 설정을 해줘야 한다. 종료 태그가 필요 없다. utf-8 은 한글을 지원하는 대표적인 인코딩 방식 이다. utf-8 인코딩 방식을 사용하라고 브라우저에게 명령을 해 주는 것이다. 태그 안에 작성 한다.

태그, 태그 VS 태그, 태그 태그 텍스트를 굶게 만들고 싶으면 bold를 뜻하는 태그를 사용하면 된다. 태그 텍스트를 날려 쓰고 싶으면 italic을 뜻하는 태그를 사용하면 된다. Phrase Tags 태그는 그냥 텍스트를 bold체로 만들어주고, 태그는 그냥 텍스트를 italic체로 만들어준다. 둘 다 '시각적인 특징' 만 갖고 있는 태그 이다. HTML 에서는 시각적인 특징 뿐만 아니라 의미도 담고 있는 Phrase tag가 있다. Phrase Tags_ 태그 태그는 텍스트를 굶게 만드는 것이 목적이지만, 태그는 감싸고 있는 텍스트가 중요하다고 표시하는 것이 목적이다. 겉보기에는 두 태그가 똑같지만, 스크린리더(컴퓨터의 화면 낭독 소프트웨어 : 시각장애인, 학습/인지 장애인, 노인, 다문화 가정의 ..