AngeRay

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_ 태그 태그는 텍스트를 굶게 만드는 것이 목적이지만, 태그는 감싸고 있는 텍스트가 중요하다고 표시하는 것이 목적이다. 겉보기에는 두 태그가 똑같지만, 스크린리더(컴퓨터의 화면 낭독 소프트웨어 : 시각장애인, 학습/인지 장애인, 노인, 다문화 가정의 ..

기본 HTML 태그 정리 정의 Hyper Text Markup Language를 의미하며, 현 사용 중인 html 5는 sementic 언어의 기능이 추가된 프로그램 이다. 웹 표준인 xhtml1.0 + 기능 = html 5 이다. 크로스 브라우징(모든 브라우저에 동일하게 보여져야 한다는 개념)이 되어야 한다. 컴퓨터에 이라는 시작 명령으로 시작해야 한다.(html 5 기준으로 작성한다고 선언하는 것이다.) 선언 HTML 파일을 쓸 때는 가장 먼저 선언을 써야 한다. 최신 버전인 HTML 5를 사용하기 위해서 작성한다. 꾸미기 위한 와 구조적인 의 구조로 되어 있다. 태그 페이지의 제목은 태그에 써주면 된다. 브라우저의 탭이나 방문 기록에 나와 있는 바로 그 제목이 이곳에 들어간다. 태그 안에 들어가며 ..

서비스가 주도하는 시대에 살아남는 법과 HTML/CSS 개관 본격적으로 서비스가 주도하는 시대이다. 서비스를 통해 새로운 가치 창출이 이루어지고 있다. 그리고 그 서비스는 웹에서 이루어 진다. 지금 웹에서는 무형의 서비스가 점차적으로 늘어나고 있다. 웹(Web) 은 연결고리 이다. Windows와 Macintosh, 데스크탑과 랩탑, 태블릿과 스마트폰, 안드로이트와 아이폰 이 모두를 이어주는 매개체가 바로 웹이다. 가트너(미국의 정보 기술 연구 및 자문 회사) 에서는 2019년까지 전체 브랜드의 20%가 모바일 앱을 제거할 것이라고 예견했다. 그리고 강력한 대안으로 Progressive Web Apps(PWAs)를 지목하고 있다. '프로그레시브 웹 앱'은 웹의 장점과 앱의 장점을 결합한 것이며, 궁극적으..