본문 바로가기

728x90
반응형

웹언어

(191)
[CSS3강좌] 5강 FONT(글자관련속성) ** 영상으로 보고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=6u1bYDdJmHM 1. 속성정리 속성명 설명 font-family (글꼴 지정속성) serif 명조체 계열 sans-serif 고딕체 계열 font-size 글자 크기 지정 속성 - 사용단위: px, %, em 등, 키워드 : 영문크기 font-weight (글자 굵기 지정 속성) normal 원래 굵게 나오는 글자를 기본상태 bold 글자를 굵게 지정 숫자지정 100~900사이의 숫자 지정(높을수록 굵음) font-style (글자 기울기 지정 속성) normal 기울어져 나오는 글자를 기본상태 italic 글자를 기울게 지정 font-variant (소문자→작은대문자) normal 소문자를..
[CSS3강좌] 4강 TEXT(글자관련속성) ** 영상으로 보고 싶은 분은 아래를 클릭해주세요. https://www.youtube.com/watch?v=L7zdQ6uV3fY 1. 글자관련 속성 정리 속성명 설명 color (글자색 지정 속성) 키워드 h1{ color: red; } =>영문 rgb방식 h1{ color: rgb(100,100,100); } hsl방식 h1{ color: hsl(50,20%,50%); } hex코드 h1{ color: #000000; } rgba방식 h1{ color: rgba(100,100,100,0.5); hsl방식 h1{ color: hsla(50,20%,50%,0.5); } text-align (문단 가로 정렬) left 글자를 왼쪽에 지정 right 글자를 오른쪽에 지정 center 글자를 가운데 지정 ju..
[CSS3강좌] 3강 CSS색상넣기(컬러값처리) 1. CSS색상(컬러)값의 종류 구분 정리 CSS2 키워드 영문으로 컬러값 작성 ex) color: red; rgb 레드그린블루수치작성 ex) color: rgb(20,20,20); hsl 색상,채도,명도수치작성 ex) color: hsl(70,70%,70%); hex rgb를 16진법코드 변환 ex) color: #333333; CSS3 rgba rgb방식에 alpha(투명도)추가 ex) color: rgba(20,20,20,0.5); hsla hsl방식에 alpha(투명도)추가 ex) color: hsla(70,70%,70%,0.5); 2. 컬러값을 적용 시킬 수 있는 CSS속성명 속성명 정리 코드예시 color 글자색 지정 속성 h1{ color: red; } background-color 배경색 ..
[CSS3강좌] 2강 CSS기본선택자 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=ZkqK4a7i3SI&t=165s - 선택자 : CSS가 특정 요소를 선택해서 스타일을 변경하기 위해 사용 1. 기본 선택자의 종류 선택자 설명 예시 * 모든 태그를 선택 *{ color: red; } 태그명 해당 태그를 선택 h1{ color: red; } 아이디 태그 속성인 아이디속성의 값을 선택 #text01{ color: red; } 클래스 태그 속성인 클래스속성의 값을 선택 .text01{ color: red; } 2. 전체선택자 - 모든 태그를 선택 1) 코드뷰 제목태그 문단태그 리스트태그 리스트태그 리스트태그 리스트태그 2) 전체선택자로 스타일을 쓰기 전 미리보기 3) 전체선택자..
[CSS3강좌] 1강 CSS문법과 스타일시트 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=ZkqK4a7i3SI&t=165s - CSS : 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트 1. CSS문법 문법 예시 선택자{ 속성명: 속성값; } h1{ color: red; } 2. 스타일시트의 종류 종류 설명 내부 스타일시트 제목태그 문단태그 리스트태그 리스트태그 리스트태그 리스트태그 2) 코드 완성뷰 4. 외부스타일시트 - CSS문서를 따로 만들어서 HTML문서에 연결해서 사용하는 방식 - 보통 프로젝트에서 대부분 이방법을 사용한다. 1) HTML코드 뷰 제목태그 문단태그 리스트태그 리스트태그 리스트태그 리스트태그 2) 외부 CSS에 스타일언어 작성 3) 코드 완성뷰 5...
[HTML기본문법] 5강 <div>태그와 <span>태그 1. 태그 설명 태그 설명 div 여러 태그를 묶어 CSS를 한번에 적용하는 태그 - 구역태그 혹은 박스태그라 부름 span 한 태그를 나눠 여러 CSS를 적용하는 태그 - 분리태그 2. 태그 예제 1) 태그에 CSS를 각각 적용했을 때 코드뷰 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세 2) 태그에 CSS를 각각 적용했을 때 코드완성뷰 3) div태그로 하나로 묶어 CSS를 적용하는 경우의 코드 뷰 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세 4) div태그로 하나로 묶어 CSS를 적용하는 경우의 코드 완성뷰 3. 태그 예제 1) 코드뷰 - li태..
[HTML기초문법] 4강 이미지 태그 ** 영상으로 보고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=lnIJqgJLDaM&t=275s 1. 이미지태그 1) 이미지 태그 기본문법 - 위 2개의 속성을 작성하지 않으면 웹표준에 어긋남 2) 이미지 태그의 속성 속성 설명 src 이미지의 경로를 작성하는 태그 alt 이미지의 대체텍스트로 경로가 잘못되는 경우 대체텍스트가 보인다. 웹접근성에서 중요한 의미로 시각장애인에게 스크린리더기로 읽어주는 역할을 한다. width 이미지의 가로크기 속성으로 값에 단위를 작성하지 않는다. (px단위로 자동인식) CSS에서 대체 가능하다. 미작성시 원래 사이즈로 처리 height 이미지의 세로높이 속성으로 값에 단위를 작성하지 않는다. (px단위로 자동인식) CSS에서..
[HTML기초문법] 3강 a(앵커)태그와 하이퍼링크 ** 영상으로 보고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=Oo4zI6fuRHA&t=1259s 1. 태그의 속성문법 1) 정의 : 태그가 갖은 특징을 기술한 것이 속성 2. a(앵커)태그 1) 하이퍼링크(Hyper Link) - 링크가 걸린 컨텐츠를 클릭하면 다른 문서(html페이지)로 이동하는 기술을 의미 2) a태그의 속성 속성 설명 href 이동될 페이지 경로를 작성 target 이동될 페이지의 위치 지정 title 링크에 대한 설명텍스트를 툴팁으로 보여줌 target 속성값 설명 _self 클릭한 컨텐츠를 담은 html과 동일한 창(현재 창)에서 페이지를 이동(속성 생략과 같음) _blank 새창 혹은 새탭에서 페이지 이동 _parent 현재 페이..

728x90
반응형