목록CSS (96)

투케이2K

18. (html/css/javascript/jquery) border-radius 사용해 테두리 둥글게 만들기 및 opacity 사용해 레이아웃 투명도 조절 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. ..
FrontEnd 2021. 5. 31. 08:39
17. (html/css/javascript/jquery) video source 태그 사용해 비디오 동영상 재생 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​[동영상 재생] ​ ​[폴더 구조] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2...
FrontEnd 2021. 5. 31. 08:27
16. (html/css/javascript/jquery) img src 태그 사용해 이미지 사진 표시 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​[사진 표시] ​ ​[폴더 구조] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. ..
FrontEnd 2021. 5. 31. 08:08
15. (html/css/javascript/jquery) z-index 사용해 레이아웃 우선 순위 위치 정렬 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​[우선 순위 지정 (전)] ​ ​[우선 순위 지정 (후)] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시..
FrontEnd 2021. 5. 31. 07:47
14. (html/css/javascript/jquery) link rel type 사용해 구글 폰트 google fonts 외부 스타일 font family 에 적용 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ ​ /* =========================== */ [사전 작업] 1. 구글 폰트 제공 사이트에 접속해 > 원하는 폰트 선택 > 폰트 적용 소스코드 복사 실시 /* =========================== */ ​ /* =========================== */ [소스 코드] hello 투케이2K /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​[일..
FrontEnd 2021. 5. 28. 10:25
13. (html/css/javascript/jquery) link rel type 사용해 외부 스타일 css 파일 설정 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] [HTML 소스코드] [CSS 소스코드] /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정 4. margin : 마진 (외부) 여백 설정 5. padding : 패딩 (내부) 여백 설정 6. border : 테두리 (선) 표시 설정 7. background : 배경 표시 설정 8. display : 화면..
FrontEnd 2021. 5. 28. 09:29
12. (html/css/javascript/jquery) 인터넷 및 폴더 이미지를 배경 이미지로 설정 - background-image, repeat, position, size

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​[폴더 구조] ​ ​ ​[이미지] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. ..
FrontEnd 2021. 5. 28. 09:14
11. (html/css/javascript/jquery) 기본 반응형 레이아웃 구조 생성 - viewport 뷰포트 , media 미디어 사용

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ ​[브라우저] ​ ​ ​[모바일] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정..
FrontEnd 2021. 5. 26. 13:27
10. (html/css/javascript/jquery) viewport 뷰포트 , media 미디어 사용해 반응형 모바일 구조로 레이아웃 변경 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ ​[브라우저 화면] ​ ​[모바일 화면] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크..
FrontEnd 2021. 5. 25. 17:52
9. (html/css/javascript/jquery) overflow 사용해 콘텐츠 영역 표시 여부 설정 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] 안녕하십니까! 만나서반갑습니다 안녕하십니까! 만나서반갑습니다 안녕하십니까! 만나서반갑습니다 안녕하십니까! 만나서반갑습니다 안녕하십니까! 만나서반갑습니다 안녕하십니까! 만나서반갑습니다 안녕하십니까! 만나서반갑습니다 안녕하십니까! 만나서반갑습니다 안녕하십니까! 만나서반갑습니다 안녕하십니까! 만나서반갑습니다 /* =========================== */ [결과 출력] ​ ​[auto 설정] ​ ..
FrontEnd 2021. 5. 25. 17:09
8. (html/css/javascript/jquery) display table 사용해 p태그 텍스트 수평, 수직 정렬 및 vw , vh 사용해 폰트 사이즈 반응형 크기 지정

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] 안녕하십니까! 만나서반갑습니다 /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정..
FrontEnd 2021. 5. 25. 15:56
7. (html/css/javascript/jquery) display block 사용해 div 레이아웃 세로 정렬 수행 실시 - id 값 지정 사용

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정 4. margin : 마진 (외부..
FrontEnd 2021. 5. 25. 14:11
6. (html/css/javascript/jquery) position 속성 (relative , absolute , fixed) 사용해 위치 지정 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정 4. margin : 마진 (외부..
FrontEnd 2021. 5. 25. 13:50
5. (html/css/javascript/jquery) display flex 사용해 div 레이아웃 세로 정렬 수행 실시 - id 값 지정 사용

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정 4. margin : 마진 (외부..
FrontEnd 2021. 5. 25. 11:30
4. (html/css/javascript/jquery) nth-child 자식 지정 방식 사용해 display inline-block 가로 정렬 수행 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정 4. margin : 마진 (외부..
FrontEnd 2021. 5. 25. 11:11
3. (html/css/javascript/jquery) display inline-block 사용해 div 레이아웃 가로 정렬 수행 실시 - id 값 지정 사용

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정 4. margin : 마진 (외부..
FrontEnd 2021. 5. 25. 10:51
Prev 1 2 3 4 5 Next