front-side/CSS11 Semantic UI : 소개 ~ js가 필요한 컴포넌트의 사용법 [생활코딩 CSS 강의 중 마지막 - Semantic UI 부분] 참고한 사이트: 1. 자바스크립트가 필요한 컴포넌트의 사용법 - Semantic UI (opentutorials.org) 2. Dropdown | Semantic UI (semantic-ui.com) 1. 라이브러리의 개념 library란, 무언가를 만들 때 공통적으로 많이 사용되는 것들을 한데 모아서, 재사용하기 쉽게 만들어 놓은 것. 여기에서는 라이브러리로 Semantic UI와 Bootstrap를 소개했다. Semantic UI (semantic-ui.com) 이 사이트의 모든 요소가 Semantic UI로 만들어졌다. Semantic UI Shipping Choose your shipping options semantic-ui.co.. 2021. 5. 31. 10. 코드 경량화(minify) ~ CSS 뛰어넘기(preprocessor) 1. 코드 경량화(= minify 하기) : 꼭 필요한 작업은 아님. 웹사이트의 규모가 크거나, 방문자가 많은 경우에 효과 있는 처리. 경량화 하는 방법도 여러 가지가 있음! 1. HTML/CSS editor에 코드 경량화(code minifier) 프로그램 설치하기 나는 Bracket editor을 사용했다. 다른 editor에도 이와 비슷한 경로로 경량화를 할 수 있을 것이다! => JS CSS Minifier 를 설치한다. * 이때, 경량화 할 코드가 들어있는 파일은 CSS 형태의 파일로 저장한다! b/c html이 확장자인 파일에 minify를 적용하면 아무 일도 일어나지 않는다! 해당 파일을 열어 놓은 상태에서, [편집]-[Minify]를 누르면 => 기존파일명.min.css 라는 파일이 새로 .. 2021. 5. 18. 9. 그래픽 fin ~ 유지보수-link와 import 그래픽 5) SVG : 직접적인 그래픽과 상관은 없지만, SVG파일도 CSS에서 효과를 주는 대상이기 때문에 있는 챕터. 1. SVG파일이란? Vector file로, 기존의 bitmap 이미지와 비교할 때 차이가 있다. bitmap : 작은 점으로 이미지를 표현. 확대하면 계단 효과 등 깨짐 발생 -> png vector : 이미지를 선과 점의 연결로 표현. 확대해도 깨짐 발생 X -> svg 2. SVG / PNG 파일 다운받아서 CSS에 불러 오기 1. SVG / PNG 이미지 다운받기: thenounproject.com/ 여기서 이미지 아이콘 무료 다운로드 가능! 2. 태그를 사용해서 나타낸다. 확장자만 다르다. SVG:Vector PNG:Bitmap 전혀 차이 없는 두 개의 이미지가 만들어지지만.. 2021. 4. 13. 8. 그래픽 1. 배경(background) 1) 배경의 세부 속성들(순서대로) 1. background-color : 색깔 2. background-image : 특정 이미지를 배경에 적용할 때. background-image : url("이미지 경로.확장자") 3. background-repeat : 배경 이미지의 경우, 바둑판식으로 반복될지를 결정하는 속성 1. : no-repeat : 이미지 반복 안 함 2. : repeat-x : 가로 방향으로만 반복나열 3. : repeat-y : 세로 방향으로만 반복나열 4. : repeat[기본값] : 가로 세로 반복(바둑판식) 4. background-attachment : 배경이미지가 화면에 어떻게 붙어 있을지를 결정함 1. scroll[기본값] : 화면 스크롤하면.. 2021. 4. 12. 7. 레이아웃 1. flex의 기타 속성들 정리 : 모든 내용은 Flexbox playground (codepen.io)를 참고했다. [1] 전체 element에 적용되는 속성 1) flex-wrap flex의 기본 설정 : 같은 row/column에 배정된 컨텐츠의 총 너비/높이의 합이 컨테이너 전체의 너비/높이의 합보다 크다면(높이가 지정된 경우), flex-direction 이 설정된 경우 그냥 한 row/column에 컨텐츠를 나타낸다. flex-wrap에는 3가지 값이 있다 1. flex-wrap : nowrap => 기본값. KSY HTML CSS JavaScript Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum del.. 2021. 4. 7. 6. 레이아웃 추가(심화)내용 1. box-sizing : box model 을 사용할 때 지정하는 속성 중 하나로, 기존 box model 사용 시의 불편함을 없애려고 만들었다. 기존의 문제점 holy grail layout 등을 만들면서 box model을 사용하여 padding, border, width 등을 지정할 때, html 태그의 width가 여러 float 속성을 적용한 요소들의 width의 합과 맞아떨어져야 보기좋은 레이아웃이 만들어지는데, 이때 각 요소들의 border과 margin 값을 고려하여(추가로 더해서) width 값을 예상해야 하는 불편함이 있었다. ex) element1의 width는 300, border는 10, element2의 width는 400, border는 15, margin은 20일 경우 -.. 2021. 4. 5. 이전 1 2 다음
