전체 글 (443) 썸네일형 리스트형 [HTML/CSS] Ultimate CSS Gradient Generator - CSS그라디언트 코드 제공 사이트 사이트 주소 : https://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator from ColorZilla A powerful Photoshop-like CSS gradient editor www.colorzilla.com - CSS3에서 그라디언트 코드를 쉽게 생성해주는 사이트 - 포토샵 그라디언트 에디터처럼 색상을 변경 후 코드만 복사하면 된다. - Radial(원형) 그라디언트도 제공 [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태.. [폰트] 눈누폰트 - 한글무료폰트안내 사이트 사이트 주소 : https://noonnu.cc/ 상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누 상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누 noonnu.cc - 상업적 이용이 가능한 한글 무료폰트 모음 사이트 - 라이센스에 대한 세부내용들도 자세 설명 - 다운로드 받을 수 있는 주소를 안내 - 웹폰트로 사용할 수 있는 코드도 제공 [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 현재 페이.. [HTML기초문법] 2강 글자형태태그, 첨자태그, 강조태그 ** 영상으로 보고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=lPEwKzviD0I&t=16s 1. 글자 형태 태그 1) 문법 : 보통 글자의 형태를 바꾸며, CSS언어로 모두 대체 가능하다. 태그 설명 글자를 굵게 하는 태그 글자를 기울이는 태그 글자에 밑줄주는 태그 글자에 가운데줄주는 태그 글자를 작게하는 태그 2) 코드 뷰 글자를 굵게 하는 태그 글자를 기울이는 태그 글자에 밑줄주는 태그 글자에 가운데줄주는 태그 글자를 작게 하는 태그 3) 코드 완성뷰 2. 첨자태그 1) 문법 : 글자 위나 아래에 첨부되는 글자를 만드는 태그 태그 설명 위첨자 태그 ex) a² 아래첨자 태그 루비문자 태그 - 일본어에서 한문위에 히라가나를 첨부하듯이 사용하는 태그 태그.. 이전 1 ··· 49 50 51 52 53 54 55 56 다음
