이제하네

box-shadow, text-shadow - 요소의 그림자 만들기 블록 요소와 텍스트에 그림자 효과 적용 box(text)-shadow: (가로축) (세로축) (퍼짐 정도) (색상)

CSS 초기화하기 모든 태그에는 고유의 여백,크기등이 기본 설정이 있으므로 원하는 값으로 세밀하게 조정하기 위해서는 CSS를 초기화 해줘야한다. See the Pen CSS 초기화하기 by 신범식 (@ulqsqjpw-the-solid) on CodePen. float - 블록 요소 좌우로 배치하기 블록 요소는 자동 줄 바꿈하는 특징때문에 한 줄에 하나의 블록 요소만 넣을수 있음 2개 이상의 블록 요소를 한줄에 배치하기 위해서는 float속성을 사용 예시1 : 일반적으로 블록 요소 안에 자식 요소를 넣으면 부모의 블록 요소에는 높잇값을 지정 X 예시1 : 부모 요소가 자식 요소의 높잇값을 자동으로 인지하여 감싸줌 예시2 : wrap2에 있는 section요소가 좌우로 배치되었지만 부모요소인 .wrap2가 ..

배경색 지정하기 background-color 속성을 사용해 태그에 배경색을 직접 지정 폰트색상처럼 영어 색상명, RGB, 16진법 표기법 사용가능 See the Pen 배경색 지정하기 by 신범식 (@ulqsqjpw-the-solid) on CodePen. 배경 이미지 삽입하기 배경 이미지를 삽입할 때는 여러개의 속성값을 같이 지정해야함 background-image : 배경 이미지 삽입 속성값 : url(이미지 경로) background-repeat : 배경 이미지 반복 속성값 : repeat,repeat-x(y),no-repeat background-positon : 배경 이미지 위치를 지정 속성값 : 가로축, 세로축 background-size : 배경 이미지의 크기를 지정 속성값 : contai..

너비와 높이 지정하기 width,height 속성을 사용해 너비값과 높잇값 설정가능 px: 너비값과 높이값을 px단위로 지정 %: 부모 태그를 기준으로 너비값과 높이값을 %단위로 지정 vw: 웹 브라우저의 너비를 기준으로 너비값과 높잇값을 백분율로 지정 vh: 웹 브라우저의 높이를 기준으로 너비값과 높잇값을 백분율로 지정 See the Pen 너비와 높이지정하기 by 신범식 (@ulqsqjpw-the-solid) on CodePen. 바깥쪽 여백 지정하기 margin 속성을 사용해 태그의 바깥쪽 여백 설정 px: 태그의 바깥쪽 여백을 px단위로 지정 %: 부모 태그 기준으로 태그의 바깥쪽 여백을 %단위로 지정 vw: 웹 브라우저의 너비를 기준으로 태그의 바깥쪽 여백을 백분율로 지정 vh: 웹 브라우저의 ..

폰트 굵기 바꾸기 font-weight 속성을 사용해 간단하게 변경 가능 속성값으로는 normal,bold등이 있다. See the Pen 폰트 굵기 바꾸기 by 신범식 (@ulqsqjpw-the-solid) on CodePen. 폰트 크기 바꾸기 font-size 속성을 사용해 크기 변경 가능 px: 픽셀 단위로 폰트 크기 설정 rem: 최상위 부모인 을 기준으로 폰트 크기 설정 em: 부모 요소를 기준으로 폰트 크기를 설정 See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen. 폰트 모양 바꾸기 font-family 속성을 사용해 폰트 모양 변경 가능 한글 폰트는 큰 따옴표로 감싸서 표기 영어 폰트는 큰 따옴표로 감싸지 않아도됨 See the P..

전체 선택자 - 모든 HTML 요소 한꺼번에 선택하기 전체 선택자는 HTML파일의 태그를 포함하여 태그 전체를 선택 전체 선택자 기호는 * 이고 { }로 그룹으로 지정 태그를 포함아여 그 안에 있는 모든 자식 태그에 적용 See the Pen 전체선택자 by 신범식 (@ulqsqjpw-the-solid) on CodePen. 태그 선택자 - 태그명을 이용하여 선택하기 태그 선택자는 HTML 파일의 특정 태그 요소를 선택 See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen. 자손 선택자 - 자식과 하위 요소를 모두 선택하기 자손 선택자는 특정 HTML 요소의 자식 요소를 포함하여 그 하위에 있는 모든 요소를 선택 See the Pen 자손선택자 by..

HTML 파일에 외부 CSS파일 연결하기 에디터에서 외부 CSS 파일 입력하기 태그 안에 어디든 link:css입력 CSS 파일 경로 수정하기 my-project 폴더안에 css폴더 생성 거기안에 style.css파일 생성 href 속성을 css/style.css 로 변경 CSS 파일의 문자 인코딩 방식 지정 style.css파일 1행에 @charset "utf-8"; 입력

- 오디오 파일 재생하기 태그를 이용하면 확장기능 없이 다양한 오디오 파일을 웹페이지 삽입 가능 태그에 적용할수 있는 속성 controls : 오디오 파일을 재생하는 컨트롤 패널 생성 autopaly : 웹 페이지를 열면 자동으로 재생 loop : 오디오 파일을 무한으로 반복 preload : 오디오 파일을 재생하기전 파일을 미리 불러옴 - 동영상 파일 재생하기 태그를 사용하면 웹 브라우저에 동영상 재생가능 태그에 적용할수 있는 속성 controls : 동영상 파일을 재생하는 컨트롤 패널 생성 autoplay : 웹 페이지를 열면 자동으로 동영상 파일 재생 lool : 동영상 파일을 무한으로 반복하여 재생 muted : 동영상에서 소리가 나지 않도록 설정 preload : 동영상 파일을 재생하기 전에 모..

- 다양한 정보 입력받기 태그는 type속성을 다르게 지장하여 다양한 입력 형태로 만들수있다. type = " text" - 텍스트 입력받기 아이디 ==> 타입을 text속성으로 지정 type = " password" - 비밀번호 입력받기 비밀번호 ==> 타입을 password속성으로 지정 type = " checkbox" - 체크 박스 선택하기 복수선택 가능 취미 스포츠 ==> 타입을 "checkbox" 속성으로 지정 게임 요리 type = " radio" - 라디오 박스 선택하기 복수선택 불가능 직업 UI/UX 디자이너 ==> 타입을 "radio" 속성으로 지정 프론트엔드 개발자 백엔드 개발자 type = " file" - 파일 선택하기 첨부 파일 ==> 타입을 "file"속성으로 지정 type = ..

- 순서가 없는 목록 만들기 태그는 순서가 없는 메뉴를 목록으로 만들때 사용 태그를 사용할때는 자식태그인태그를 같이사용 내가 좋아하는 과일 딸기 바나나 사과 - 순서가 있는 목록 만들기 성적 순위, 번호등과 같이 순서가 중요할떄 사용 태그와 작성법은 비슷 --> 변경 태그 목록은 앞에 숫자가 표시 A반 시험 석차 김영희 박철수 홍길동 이하나 김길동 ,, - 정의형 목록 만들기 정의형 목록을 만들때 사용 부모태그인 안에 자식태그인,를 넣음 에는 정의할 제목, 에는 정의할 내용 입력 정의한 내용은 자동으로 들여쓰기하여 나타냄 IT 직군 UI 디자이너 기능성과 심미성을 고려한 UI 디자인 프론트엔드 개발자 사용자가 직접 이용하는 프런트 화면 개발 백엔드 개발자 사용자 화면 뒤에 있는 웹 서버나 데이터베이스의 ..