Coding/CSS13 CSS - z index HTML을 꾸미다 보면 겹침이 발생 할 때가 있다. 이럴 때, CSS 효과를 통해서 우선 순위로 보여주는 기능이 z-index 이다. 'Good morning' 밑에 'Hello world' border 효과를 준 것이 있다. z - index 효과를 주지 않으면 나중에 나온 #b 항목이 우선순위를 가진다. 이 때, z - index 효과를 주면 'Hello World'글을 우선순위로 가져올 수 있다. *z-index : 값을 줄 수 있는데 숫자가 클수록 우선 순위를 가진다. *z-index는 값을 지정 해줄 수 있지만, auto라는 기능도 가지고 있다. auto를 주면 나중에 효과가 없었던 것 처럼 나중에 준 우선 순위를 가진다. #CSS#z-index#우선순위#겹침 2020. 6. 4. CSS - 그림자 넣기 (shadow) CSS를 활용하여 HTML에 그림자 효과를 낼 수 있다. -글자에 그림자 효과를 넣을 수 있다. *text-shadow를 활용하면 된다. *2px, 2px은 그림자의 x와 y축 방향을 나타낸다. 크기가 거질수록 그림자 멀어진다. *세번째 2px는 spread 효과이다. 그림자 글자의 퍼짐 정도를 넣을 수 있다. *네번쨰 red는 그림자의 색깔을 넣을 수 있다. -box에 그림자 효과를 넣을 수 있다. *box-shadow를 활용하면 된다. *2px, 2px는 그림자의 x와 y축 방향을 나타낸다. text-shadow와 유사하게 크기가 커질수록 그림자가 멀어진다. *세번째 2px는 spread 효과이다. 그림자의 퍼짐 정도를 넣을 수 있다. *네번째 2px는 spread 효과의 진하기를 나타낸다. *다섯번.. 2020. 5. 22. CSS - HTML에 적용 방법 CSS 효과를 HTML에 적용 하는 방법 - inline 방식 *장점 : HTML에 직접 입력하기 때문에 가시적이다. *단점 : HTML은 정보를 전달하는 언어이기 때문에 CSS를 직접 입력하면 코드가 복잡함. -HTML 내부에 Style 태그 방식 *장점 : inline 방식에 비해 코드의 복잡하지 않다. *단점 : 유지보수의 어려움 있다. *id를 선택할 때는 #을 사용한다. *class를 선택할 때는 .(마침표)를 사용한다. -HTML 외부에 Style 지정 방식 *장점 : 유지보수의 용이하다. code가 간결하다. *단점 : 파일을 따로 관리 *외부파일에서도 id는 #을, class는 .(마침표)를 사용하여 선택한다. *link 태그를 사용한다. *href는 파일경로를 입력해야 한다. *아래사진 .. 2020. 5. 20. CSS - grid Grid - HTML element를 좌표처럼 활용하여 layout 할 수 있다. *display:gird로 grid 방식을 선언 해준다. *gird-template-colums : 100px 100px 100px는 100px 단위로 3개의 열을 만들어 준다.(개수만큼 열 생성) *grid-template-rows : 30px 30px 단위로 2개의 열을 만들어 준다.(개수만큼 행 생성) *border 등의 효과등을 넣어 줄 수 있다. 좌표처럼 활용하여 box size를 이용해서 크기를 조절 - 좌표처럼 활용이 가능 *grid-column-start:1; , grid-column-end:3; 을 간단하게 grid-column:1/3; 표현이 가능하다. *grid는 좌측 상단부터 (1,1)부터 시작이다.. 2020. 5. 7. 이전 1 2 3 4 다음 반응형