front-end/HTMI CSS
-
Font Awesome 이용하기front-end/HTMI CSS 2023. 8. 8. 09:36
1. Font Awesome 직접 사용 방식 Font Awesome 홈페이지에서 다운로드 파일 중에서 CSS, Webfonts를 작업 폴더에 넣기 CSS 폴더 내에 있는 all.css 파일을 head에 링크 2. Font Awesome CDN 링크 방식 CSS 호스팅 하는 경우 all.min.css 파일을 링크를 통해 직접 다운로드 방식이 아니더라도 사용 가능 font awesome 5 cdnjs 장점도 존재 하지만 단점은 사이트가 다운 될 경우 CSS 파일 이용이 힘들어진다. 3. Font Awesome 아이콘 넣기 Font Awesome홈페이지 접속 ICON 탭에서 접속 후 6버전 혹은 5버전 클릭 필요한 아이콘을 검색 HTML 코드를 복사 후 작업 HTML에 붙어넣기 - 둥근원에 별모양 넣기 먼저 ..
-
transform & animation 쓰는 이유front-end/HTMI CSS 2023. 8. 6. 14:21
1. transform의 속성 rotate 회전 translate 좌표 이동 scale 확대 축소 skew 비틀기 .box1 { transform : rotate(10deg); } .box2 { transform : translate(10px, 20px); } .box3 { transform : scale(2); } .box4 { transform : skew(30deg); } - 2개 이상의 속성을 부여하고 싶을 경우 .box1 { transform : rotate(10deg) scale(1.5); } 2. animation 속성 @keyframs 정의하기 x% 애니메이션 x% 동작시 실행 @keyframes 좌우움직임{ 0% { transform : translateX(0px); } 50% { tra..
-
HTML video 태그 속성(비디오 배경 사용 방법)front-end/HTMI CSS 2023. 8. 3. 22:51
1. video 태그 영상을 보여주는 태그 controls 속성을 넣으면 재생 컨트롤 바가 생성 source 태그를 사용할 경우 조금 더 호환성이 좋아진다. ex) 2. 비디오 태그의 속성 muted 음소거 autoplay 자동재생 단 muted를 적어야 작동 poster 썸네일이미지 preload 영상 다운로드 속성 auto metadata none metadata 초반 부분만 다운로드 3. 비디오를 배경으로 사용하는 방법 autoplay로 자동 재생의 속성을 이용 loop 속성을 이용하여 반복 재생을 하면 가능 안녕하세요 심투의 블로그입니다. .video-box { height: 500px; width: 100%; overflow: hidden; position: relative; } .video-c..
-
Sass(Scss)로 css를 간편하게 만들자front-end/HTMI CSS 2023. 8. 1. 22:10
1. 환경 설정 VScode 에디터를 실행한다. extension 메뉴를 눌러서 live sass compile를 설치한다. (파일명). scss으로 만들어서 사용한다. test.scss 파일에 내용을 작성 후 저장을 한다. css 파일에 설정한 값이 저장된 내용이 만들어진다. 이 파일을 HTML에 링크를 걸어서 사용하면 됩니다. map 파일의 용도는 구글 크롬에서 찾기 쉽게 만드는 용도다. - Sass파일과 Scss파일의 차이점 // Sass 방식 .background color : red // Scss 방식 .background { color : red } 2. Sass(Scss) 문법 특징 값을 저장을 하고 쓸 수 있다. $변수명 : 컬러, 폰트사이즈, 높이, 길이 등등 한글이 잘 적용이 된다. 사..
-
CSS Transition 속성front-end/HTMI CSS 2023. 6. 30. 21:16
1. opacity 속성 HTML 요소의 투명도를 조절하는 속성 0 ~ 1 실수 입력(0.5 반투명 효과) .box { opacity : 0 } 2. transition 속성 transition을 부여하면 CSS가 변할 때 서서히 변경되는 효과가 생김 all 은 모든 스타일, 1s는 1초 동안 변화 .box { opacity : 0; transition : all 1s; } 3. one-way 애니메이션 만드는 TIP 시작 스타일 정하기 최종 스타일 정하기 트리거 주기 정하기 transition으로 서서히 동작 만들기
-
반응형 웹 레이아웃 만들기front-end/HTMI CSS 2023. 6. 26. 22:28
1. 단위 정리 rem은 과거에 웹브라징 폰트를 조절해서 사용하는 사람들이 있어서 사용을 했었습니다. 현재는 ctrl + 마우스 훨로 줌 인 줌 아웃을 쓰는 사람들이 많아져서, 페이지를 가변적으로 반응하는 사이트가 아니면 사용하지 않습니다. 글자 사이즈 단위를 px단위로 기억해서 16px 18px 20px 으로 사용하는 것보다 1rem 1.2rem 이런 씩으로 사용하는것이 편하게 좋습니다. .box { width : 16px; /* 기본 px 단위 */ width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */ width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */ width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */ width..
-
HTML head 태그(사이트 제목, open graph 등등)front-end/HTMI CSS 2023. 6. 25. 21:43
1. head 태그에 사용되는 것들 바디 - 각종 css 파일 CSS 파일들을 첨부할 때 링크태그를 넣을 수 있습니다. 1. css/main.css 현재 HTML파일과 같은 경로에 있는 css라는 폴더 내의 main.css 파일을 의미 = 상대 경로 2. /css/main.css 현재 사이트의 메인경로부터 시작해서 메인/css/main.css 파일을 첨부하라는 의미 = 절대 경로 - 스타일 태그 css 파일이 아닌 head 안에서도 style으로 가능합니다. css파일과 유사하게 작동 태그 맨 밑 같은 곳에 두면 사이트 로딩시 스타일이 깨질 수 있다. - 사이트 제목 - 여러가지 meta 태그 사이트의 인코딩 형식을 지정할 때 charset="UTF-8" 이라고 속성을 적을 수 있습니다. 사이트의 검색 ..
-
CSS Flexboxfront-end/HTMI CSS 2023. 6. 25. 19:54
1. Flexbox 란? 박스를 감싸는 부모 요소에게 display : flex를 사용 가로 정렬로 박스들의 배치 익스플로우 11 이상에서만 사용가능 11 미만에서는 에러 발생 See the Pen Flexbox by 이승훈 (@miedsluo-the-typescripter) on CodePen. 2. Flexbox 세부속성 justify-content : center; 좌우정렬 align-items : center; 상하정렬 flex-direction : column; 세로정렬 아래 코드에 입력 시 세로로 정렬되는 박스의 모습을 볼 수 있습니다. flex-wrap : wrap; 폭이 넘치는 요소 wrap 처리 flex-grow : 2; 폭이 상대적으로 몇 배인지 결정 See the Pen Flexbox..