css5 [코딩공부_114] SVG를 활용한 웹 페이지 만들기 png나 jpg만 사용하여 웹 페이지를 만들진 않으셨나요? SVG를 활용해서 멋진 웹 페이지를 만들어 보아요!! :) SVG란? SVG(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어입니다. 벡터는 기본적인 도형, 패스 등 일러스트에서 작업하는 모든것이 될 수 있습니다. SVG는 코드를 수정할 수 있기 때문에 다양하게 활용할 수 있다는 장점이 있습니다. - SVG는 크기를 줄이거나 늘리더라도 화질에 영향을 미치지 않습니다. - 원하는 색상을 자유롭게 적용할 수 있습니다. SVG의 파일 용량 줄이기 패스를 정돈하고 가능한 많은 포인트를 제거하고 포인트를 픽셀 값에 맞추어 겹치는 영역을 최대한 제거하여 파일 용량ㅇ르 줄일 수 있습니다. S.. 2023. 9. 30. [코딩공부_112] 내가 작성한 코드가 왜 적용되지 않을까? 퍼블리싱을 하다보면 자신의 의도대로 CSS가 먹히지 않는 경우가 많습니다. 이러한 경우는 많은 경험이 쌓여야 즉각적으로 대처할 수 있다고 생각합니다. 퍼블리싱을 한지 2년 조금 넘은 사람으로써 느끼지만 적용되지 않는 경우는 거의 비슷한 이유로 인해 발생합니다. 그러므로 알고 넘어가면 나중에 큰 도움이 될 거라고 생각합니다 :) CSS가 적용되지 않는 경우는 일반적으로 다섯가지가 있습니다. 1. CSS 파일의 경로가 올바르지 않은 경우 2. 캐시로 인한 이전 CSS 파일이 적용된 경우 3. 우선순위에서 밀려난 경우 4. 다른 엘리먼트에 깔려 안보이는 경우 (=Position으로 인하여 안보이는 경우) 5. 올바르지 않은 함수 호출 순서의 경우(JS) 1. CSS 파일의 경로가 올바르지 않은 경우 가장 일반.. 2022. 1. 3. [코딩 공부_15] CSS 셀렉터(선택자) CSS에서 엄청 중요한 부분인 셀렉터에 대해 알아보자! ① CSS 셀렉터 (Selector) = 선택자 : 내부/외부 스타일 시트에서 문서의 html 요소를 선택할 수 있게 하는 문법 기본 셀렉터 이름 설명 예시 전체 셀렉터 (universal selector) html 문서 내의 모든 요소를 선택 * {font-size: 12px} 태그 셀렉터 (tag selector) 태그를 선택하는 셀렉터 p {font-size: 12px} 아이디 셀렉터 (id selector) id 값을 선택하는 셀렉터 * 유일해야하며 하나여야 한다. #last {font-size: 12px} 클래스 셀렉터 (class selector) class값을 선택하는 셀렉터 * 중복, 다수 선언 가능 .wrap {font-size: 1.. 2021. 3. 3. [코딩 공부_14] CSS로 색상을 표현하는 방법 ① hexcode : RGB 값을 16진수로 표현해 사용하는 방법 - 핵사코드는 색상표현 방법 중, 가장 많이 쓰는 방법으로 3개 또는 6개의 숫자를 이용하여 색상을 표현한다. ex) #000, #000000, #fff, #ffffff...등 - #00 00 00 Red Green Blue → 3자리인 경우, #000 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 0 1 2 3 4 5 6 7 8 9 A B C D E F - 0에 가까워 질수록 색상이 없어지고, F에 가까워 질수록 해당 색이 늘어난다 ② color mames : 이름 그대로 색상 이름을 직접 지정해 사용하는 방법 - 브라우저별로 생각하는 색상이 다르기 때문에 색상 차가 있을 수 있기 때문에 주의해서 사용해야한다. 예를.. 2021. 3. 3. [코딩 공부_12] CSS 선언하는 방식 3가지 ① 인라인 방식(in-line) : HTML 태그에 'style' 속성을 직접 작성하는 방식 hello world - 이런 방식을 사용하면 css에서 선택자를 작성하지 않아도 style이 적용 가능하다. 따로 선택자가 필요하지 않다는 장점이 있지만 복잡한 웹디자인을 제작할 때, 반복적인 사용과 유지보수적인 면에선 번거로울 수 있다. 그렇다고 이 방법이 무조건 안좋다는 것은 아니다!! 나중에 알 수 있는 부분이지만 특정한 기능들이 자동으로 삽입 되게 하는 것으로 사용할 땐 적합하다 단, 직접적으로 작성하는 것은 피해야한다!! ② 내장 방식(embedded) : HTML head 안에을 작성하는 방식 hello world - 안에 작성한 div 선택자에 의해 body안에 들어간 hello world라는 텍스.. 2021. 2. 25. 이전 1 다음
