반응형

프로그래밍/web17

CSS 스타일 텍스트 속성 정리 ㆍ글자 색상 color : 값; 값 = 색상의 RGB표기/ 색상코드/ 영어표기 ㆍ글자크기 font-size : 값; 값 = px / em / rem / % ㆍ글꼴 font-family : 값; 값 = 글꼴이름, serif 모양 ㆍ글자 굵기 font-weight : 값; 값 = 1-900 숫자 / light / regular / bold ㆍ행간(줄 높이) line-height : 값; 값 = 쓰는 글자크기의 상대적값 (단위X 숫자로 기재) ㆍ텍스트 꾸미기 text-decoration : 값; 값 = none / underline / line-through 2023. 3. 1.
CSS 기본 규칙 ㆍCSS 기본 선택자는 스타일을 적용할 요소를 선택하고, { } 안의 속성에 값만큼 적용 된다. 선택자 { 속성:값; 속성:값; } ㆍ선택자 종류 tag / id / class / 기타 - tag ... - id 태그에 아이디 설정 : ... CSS선택사 자용: #name - class 태그에 클래스 설정 : ... ... CSS선택사 자용: .name ㆍ색상선택 : w3schools color picker 참고 빛의 3원색 RGB 사용 R(red - 빨강) : 1~255 G(green - 초록) : 1~255 B(blue - 파랑) : 1~255 A(alpha - 불투명도) : 0~1 사이 소수점 색상코드 : #ffffff (16진수로 표기, 두자리씩 레드,초록,파랑) RGB표기 : RGBA(빨강,초록.. 2023. 2. 28.
HTML 문서에 CSS 스타일 적용하기 1. 인라인 ... 태그안에 바로 적용할 수 있으나, 한 요소에만 적용가능 여러 요소에 적용하려면 각각 작성해야함. 2. 태그 안에..이용하기 선택자를 이용하여 태그안에 작성해서 요소 스타일 입히기 3. 외부스타일시트 css파일을 따로 생성해서 작성 후 태그 안에 활용하여 연결하기 1번은 바로 요소에 스타일을 적용하면 되며, 2-3번의 경우 선택자를 활용하여 요소에 스타일을 연결할 수 있다. 2023. 2. 28.
HTML & CSS 참고 사이트 WHATWG (바로가기) Mozilla(MDN) (바로가기) W3schools (바로가기) W3c (바로가기) 2023. 2. 27.
HTML 문서에 구글애널리틱스 설치, 웹 데이터 스트림 ㆍ구글애널리틱스 자바스크립트 언어로 만들어졌으며, 설치시 웹브라우저가 실행하면서 여러 통계를 내준다. 구글애널리틱스(바로가기) > 구글계정 로그인 * 신규: 측정 시작(정보입력) > 순서대로 입력 후 데이터 스트림 설정 단계에서 진행 * 기존: 애널리틱스 화면에서 > 왼쪽 하단 톱니바퀴 > 관리자 > 속성 아래 [ 데이터 스트림 ] 플래폼 선택 후 정보 입력 > (웹-선택시) 웹 스트림 세부 정보 > 구글 태그 > 태그에 대한 안내 > 직접설치 > 태그 복사하여 > HTML문서 영역에 붙여넣기 2023. 2. 26.
HTML 태그 <meta property="og:tilte" content="..."> ㆍ오픈그래프 속성 ㆍ소셜URL 공유 미리보기 태그 작성 오픈그래프 프로토콜 ㆍ소셜 공유 미리보기 디버거 페이스북 미리보기 디버거 2023. 2. 26.
HTML 태그에 인라인 스타일 적용하기 style="속성:값" ㆍHTML태그에 스타일 속성 적용하기 ... ㆍHTML태그에 스타일 속성 적용하기(다중) ... ㆍ속성 color: 글자색 ackground-color: 배경색 font-family: 글꼴,글꼴 ( serif-삐침 / sans-serif-안삐침 ) font-size: 글자크기 font-weight: 글자두께(100~900) width: 가로사이즈 height: 세로사이즈 padding: 안쪽여백 ( 전체 / 세로 가로 / 위 우 아래 좌 )margin: 바깥여백 ( 전체 / 세로 가로 / 위 우 아래 좌 / 0 auto ) ※ auto는 mirgin의 가로에서만 해당 2023. 2. 25.
HTML 링크 태그 <a> ~</a> HTML 링크 태그 ~ 문장에 링크를 연결 하기 위해서는 태그로 연결할 영역을 감싼뒤 href 속성을 통해 연결하면 된다. 한글입숨 한글입숨 >> 클릭하면 위 연결된 링크페이지로 이동 속성 href=" " 연결 될 링크의 대상을 나타냄 "링크주소" target=" " _self -기본값. 에서 문서를 엽니다. 클릭한 것과 동일한 창/탭 _blank - 새 창이나 탭에서 문서를 엽니다. _parent - 상위 프레임에서 문서를 엽니다. _top - 창의 전체 본문에서 문서를 엽니다. title=" " 마우스 오버시 요소에 대한 추가 설명 2023. 2. 23.
HTML 개행 태그 <br> HTML 개행 태그 은 별도의 닫는 태그가 없다. 개행하기를 원하는 지점에서 사용하면 된다. 인생에 그러므로 얼마나 맺어, 평화스러운 청춘의 것이다. 그들은 무한한 그것은 청춘 끓는 우리의 것이다 HTML 삽입 미리보기할 수 없는 소스 2023. 2. 22.
HTML 문단 태그 <p> ~ </p> HTML 문단 태그 ~ HTML의 문단을 나타내는 태그이다. 공백을 여러번 사용해도 한번만 인식, 개행시 개행 태그를 사용해야함 밝은 천고에 너의 얼마나 넣는 모래뿐일 그것은 있다. 있음으로써 실현에 만천하의 사람은 교향악이다. 인류의 불러 꾸며 만물은 이는 그들의 것이다. 피는 그것은 자신과 귀는 충분히 봄바람이다. 영원히 무엇을 옷을 인도하겠다는 것이다. 그들은 곧 봄바람을 우리 위하여 군영과 속잎나고, 청춘의 힘차게 봄바람이다. 천하를 거친 남는 주며, 인간이 찬미를 있다. 황금시대를 간에 이것을 우리 현저하게 그러므로 그러므로 피가 이것이다. 불어 있는 청춘 청춘을 실로 거친 살 있는 그들의 것이다. 긴지라 이상은 가치를 위하여, 위하여, 찬미를 따뜻한 충분히 들어 봄바람이다. 부패를 수 예가 끓.. 2023. 2. 22.
HTML 제목 태그 <hn> ~ </hn> HTML 제목 태그 ~ HTML의 제목태그는 h1~h6까지 있으며, 숫작 작을 수록 크기가 큰 제목이다. 첫번째로 큰 제목 두번째로 큰 제목 세번째로 큰 제목 네번째로 큰 제목 다섯번째로 큰 제목 여섯번째로 큰 제목 2023. 2. 22.
⑥ 웹사이트 만들기 HTML 문장_인용구 지난 시간에 문단태그인 와 태그에 대해서 알아보았다. 지난시간 문단이었다면 이번시간에는 문장에 대해서 배워야하지만 줄간격이나 왠만한 조정은 html보다는 css에서 스타일 조정을 많이하기 때문에 문장과 관련된 인용구에 대해서 알아보려고한다. 인용구를 나타내는 태그는 두가지가 있다. 태그와 이다. 두 태그 모두 인용구를 정의하는 태그이기는 하지만 태그에 적용되어있는 기본 스타일과 인라인 태그, 블록태그라는 점이다르다. 인라인태그와 블록태그란 무엇일까? 쉽게 설명하자면 요소가 차지하는 영역을 이야기한다. 블록태그란 블록영역을 차지하여 위에서 아래로 쌓이는 형식이라고 생각하면 되고 인라인 태그란 좌에서 우로 쌓여지는 태그라고 생각하면 된다. 머리아프다고생각이 든다면 일단은 아 블록태그가 있구나, 인라인 태그라.. 2021. 8. 2.
반응형