front-end
-
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..
-
HTML CSS 웹폰트 넣는 방법 & 안티앨리어싱front-end/HTMI CSS 2023. 6. 25. 18:15
1. 폰트 패밀리 설정방법 오류 없이 사용할려면 폰트의 영문명을 사용한다. 폰트명에 띄어쓰기가 있을 수 있으므로, 따옴표 안에 담는다. 폰트명을 콤마( , )로 여러개 쓰면 제일 왼쪽에 있는 폰트부터 적용. 실패하면 뒤에 있는 폰트들을 차례로 적용한다. 웹사이트 이용자의 컴퓨터에 설치가 된 폰트들을 적용이 가능하다. body { font-family : 'gulim', 'gothic' } - 사용자의 컴퓨터에 설치되지 않은 폰트를 사이트에서 이용하는 방법 CSS파일 최상단에 @font-face 라는 명령어를 넣고, 그 안에 적용할 폰트의 경로와 이름을 적어두면 된다. font라는 폴더안에 폰트(ttf 혹은 woff)파일이 필요 woff파일은 ttf대비 용량이 적은 폰트 파일로 woff파일을 구할 수 있다..
-
OOCSS, BEM class 작명법front-end/HTMI CSS 2023. 6. 22. 23:59
1. Obiect Oriented CSS 빨간색 버튼과 파란색 버튼이 있습니다. .main-btn-red { font-size : 20px; padding : 15px; border : none; cursor : pointer; background : red; } .main-btn-blue { font-size : 20px; padding : 15px; border : none; cursor : pointer; background : blue; } 아마 두개의 button에 이렇게 넣는 경우 중복된 코드가 4줄이 존재를 합니다. 버튼이 5가지 색이면? 10가지 색이면? CSS 파일에 용량이 커지면 웹사이트 로딩 속도를 저하시키는 원인이 됩니다. .main-btn { font-size : 20px; pad..
-
CSS 버튼에 커서 올려놓을때, 클릭할때 변화시키기front-end/HTMI CSS 2023. 6. 22. 23:32
1. hover 마우스를 올려놓을 때 색 변화 .btn:hover { background : chocolate; } 2. focus 클릭 후 계속 포커스 상태일때 색 변화 포커스 상태란 : 클릭 이후 다른 곳을 클릭 하지 않고 있는 상태 .btn:focus { background : red; } 3. active 클릭이 진행 중인 상태일때 색 변화 .btn:active { background : brown; } 4. 그외 :any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/ :playing /*동영상, 음성이 재생중일 때*/ :paused /*동영상, 음성이 정지시*/ :autofill /*input의 자동채우기 스타일*/ :disabled /*disabled된 요소 스타일*/ :check..
-
CSS nth-child 셀렉터 짝수&홀수 td만 스타일 주는 법front-end/HTMI CSS 2023. 6. 20. 23:30
- nth-child 셀렉터 원하는 n번째 요소만 스타일을 주고 싶으면 :nth-child(n) 사용 아래 코드는 cart-table 안에 있는 모든 td를 찾은 다음 2번째 나오는 td에만 color를 줍니다. .cart-table td:nth-child(2) { color: red; } 짝수로 등장하는 td에만 스타일 주는 법 .cart-table td:nth-child(even) { color: red; } 홀수에 등장하는 td에만 스타일 주는법 .cart-table td:nth-child(even) { color: red; } 3n + 1 이렇게 작성하면 (3의배수 +1) 번째 등장하는 요소에만 스타일 .cart-table td:nth-child(3n+1) { color: red; }