THE 나은 웹사이트

1. text-decoration 1-1. text-decoration-line(취소선, 물결선, 밑줄등으로 텍스트를 꾸며줄 때 사용, 기본값은 none) - underline : 텍스트에 밑줄을 그음 - line-through : 텍스트 취소선 - overline : 텍스트 위에 선을 그음 1-2. text-decoration-style(선의 스타일 지정) - solid : 직선 - dotted : 점선 - double : 두 줄 - dashed : '-'(dash) 모양의 선 - wavy : 물결 1-3. text-decoration-thickness : px이나 rem등으로 선의 굵기 조절 1-4. text-decoration-color : 영문으로 된 컬러값, hex코드, rgb로 선의 색상 지정..

1. 결합자란? css를 작성할 때 각 태그의 선택자를 통해 css를 적용해 줄 수 있다. 이때 하나의 선택자가 아닌 선택자와 선택자를 결합하여 좀 더 세밀하게 css를 적용해줄 수도 있다. 2. 결합자의 종류 1) 자손 결합자 어떠한 태그의 자식 태그의 자식 태그의 스타일 속성을 지정해주고 싶을 때 사용한다. 선택자와 선택자 사이에 띄어쓰기를 통해 css를 적용할 수 있다. 2) 자식 결합자 어떠한 태그의 바로 직계 자식 태그의 스타일 속성을 지정해주고 싶을 때 사용한다. 선택자와 선택자 사이에 ' > ' 기호를 사용하여 css를 적용할 수 있다. 3) 뒤따르는 형제 결합자 같은 선상에 있는 형제 태그들이 있을 때 특정한 태그 뒤에 오는 모든 형제 태그들의 스타일 속성을 지정해주고 싶을 때 사용한다. ..

Transform이란? 요소의 회전, 기울이기, 크기 조절, 이동효과를 부여할 수 있는 속성 1. scale transform의 속성값중 scale(x,y)은 요소의 크기를 x축으로 x배 y축으로 y배 확대 또는 축소시킨다. x,y값에 들어갈 수 있는 것은 0과 양수이다. 1은 원래크기이며 0.5, 2, 2.5등의 숫자로 확대하거나 축소할 수 있다. 만약 x축으로만 확대 및 축소를 해주고 싶다면 scaleX(x)라는 속성을 쓰면 되고 y축으로만 확대 및 축소를 하고 싶다면 scaleY(y)라는 속성을 사용해주면 된다. 2. rotate transform의 속성값중 rotate(angle)은 요소를 angle만큼 회전시킬수 있다. angle은 각도를 적어주어야하는데 deg라는 단위를 사용하고 angle이 ..

1. :first-child, :last-child, :nth-child( ) -- first-child : 같은 부모요소로 감싸져 있고 자식태그들 중 형제요소 중 가장 첫번째를 의미한다. -- last-child : 같은 부모요소로 감싸져 있고 자식태그들 중 형제요소 중 가장 마지막을 의미한다. -- nth-child : 같은 부모요소로 감싸져 있고 자식태그들 중 형제요소 중 n번째를 의미한다. 2. first-child, last-child, nth-child 사용하기 HTML 삽입 미리보기할 수 없는 소스 위의 예제에서 li가 형제요소이기 때문에 li에 각각 :first-child , :last-child, :nth-child( )를 써서 스타일을 바꿔주었다. nth-child는 괄호 안에 몇 번째..

1. hover란? hover는 마우스를 올린 요소를 선택한다. hover에서의 스타일을 지정해주면 사용자가 마우스를 올렸을 때 요소의 스타일이 hover에서 지정해준 스타일로 바뀐다. 2. hover 사용하기 HTML 삽입 미리보기할 수 없는 소스 예시로 마우스를 올렸을 때 background-color와 color가 바뀌고 transform의 rotate함수를 실행하도록 만들어 보았다. HTML 삽입 미리보기할 수 없는 소스 hover를 사용해 마우스를 올렸을 때 특정 문장에 밑줄이 그어지는 효과를 만들어 보았다

1. 미디어 쿼리(Media Query) 미디어 쿼리는 반응형 웹을 만들기 위해 사용되며, 태블릿,모바일,데스크탑등 미디어의 유형에 따라 웹사이트의 스타일을 적용할 때 사용된다. 2. 미디어 쿼리 사용법 (1) html에서의 세팅 -- 먼저 head태그안에 meta태그를 이용하여 뷰포트를 설정해준다. (2) css에서의 세팅 /* mobile 가로*/ @media screen and (min-width:576px){ } /* tablet */ @media screen and (min-width:768px){ } /* desktop */ @media screen and (min-width:992px){ } /* PC */ @media screen and (min-width:1200px){ } -- 미디어 ..

1. flex-shrink flex된 item요소에 flex-shrink라는 속성을 줄 수 있다. flex-item 요소의 크기가 flex-container(flex를 준 부모요소)의 크기보다 클 때 flex-item의 크기를 줄일 때 사용한다. flex-shrink의 속성값으로는 숫자가 들어가며 음수는 쓸 수 없다. flex-container에 flex-wrap : wrap 속성을 준 경우 flex-shrink는 적용이 되지 않는다. flex-shrink의 디폴트 값은 1이므로 flex-item의 크기가 자동으로 축소된다. 그러므로 flex-item의 크기가 줄어들지 않는 것을 원한다면 flex-shrink값을 0으로 적어준다. item의 width값을 합치면 container의 width값보다 크지만..

웹 페이지를 만들고 코드를 작성하면 그 코드들이 박스형태로 웹브라우저에서 보여지게 된다. 웹의 디자인에 따라서 몇개의 박스는 가로로 배치하고 싶을 수도 있고 세로로 배치하고 싶을 수도 있을 것이다. 이걸 도와주는 css속성이 있는데 display이다. 이 display중에서도 속성값으로 flex를 이용하면 된다. *{ box-sizing: border-box; margin:0; } .box-wrap{ margin-left: 40%; margin-top: 10%; } .blue-box{ width:100px; height:100px; background-color: #293462; } .red-box{ width:100px; height:100px; background-color: #F24C4C; } .y..

웹사이트를 꾸미다 보면 요소에 맞게 다양한 폰트로 바꾸고 싶은 생각이 든다. 오늘은 폰트를 바꾸는 방법에 대해 알아보자 우선 폰트를 바꿔줄 사이트 하나가 필요하다. https://fonts.google.com/ 라는 곳인데 구글에서 다양한 폰트를 제공해준다. 1. 이곳에 들어가서 마음에드는 폰트를 하나 골라준다. 2. 마음에 드는 폰트를 골랐다면 폰트의 굵기를 정해서 select this style을 누른다. 눌렀다면 요런 페이지가 옆에 뜰건데 태그로 되어있는 저 코드들 중에 하나만 복사해서 html파일 head쪽에 붙여넣기 해주고 link밑에 보면 CSS rules to specify families 라는게 있는데 이 font-family를 폰트를 바꾸고 싶은 요소의 css에 붙여넣는다. 여기까지 하면..

1. background-image 속성? 요소의 배경이미지를 한 개 또는 여러 개 설정해주는 속성 2. 배경 이미지 파일 불러오기 background-image 속성값중 url( )이 있는데 괄호안에 이미지 파일의 절대경로나 상대경로를 적어준다. 배경 이미지를 여러 개 설정해주고 싶다면 ','를 통해 url을 여러개 가지고 온다. 3. 배경 이미지 크기 조정 background-size 속성을 사용한다. 속성값으로 px,em,%을 이용하여 width와 height값을 직접 설정할 수도 있고 contain과 cover라는 속성값을 사용할 수도 있다. contain은 이미지 전체가 보여지도록 설정해주고 배경이미지가 들어가는 요소의 크기에 따라 꽉 채워지지 않을 수 있다. cover는 요소를 다 덮을 수 있..