본문 바로가기
반응형

Embedded169

[CSS] transform transform 말 그대로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형시킬 때 사용한다. 1. transform / rotate : 요소를 회전시킬 수 있습니다. transform: rotate( angle ) /* angle이 양수나 음수냐에 따라 시계방향 반시계방향으로 회전한다 */ transform: rotateX( angle ) /* 가로축을 기준으로 회전한다. */ transform: rotateY( angle ) /* 세로축을 기준으로 회전한다. */ 2. transform / translate : 요소를 이동시킬 수 있습니다. transform: translateX( 50px ) /* 오른쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 왼쪽으로 이동합니다. */ tra.. 2023. 10. 14.
[CSS] hover & transition & transition-delay /*BUTTON*/ .btn { width: 130px; padding: 10px; border: 2px solid #333; border-radius: 4px; color: #333; font-size: 16px; font-weight: 700; text-align: center; cursor: pointer; box-sizing: border-box; display: block; transition: .4s; } .btn:hover { background-color: #333; color: #FFF; } 다음과 같은 코드가 있다. 다음 코드의 뜻은 다음과 같다. 버튼 위에 마우스를 올려놓으면, 버튼 색깔을 0.4s에 걸쳐 변경하라. hover는 마우스 커서가 해당 오브젝트 위에 있을 때라는 뜻이다. .. 2023. 10. 12.
[CSS] cursor : position 우리가 뭔가를 클릭하려고 할 때, 손가락 모양으로 커서가 바뀌는 경우가 있다. 나는 그 전까지만 해도 버튼이나 링크 연결된 곳 위에 커서 올리면 자연스레 바뀌는 줄 알았다. 하지만, 아니었다. cursor: pointer;를 사용해줘야 한다. 2023. 10. 12.
[CSS] position position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다. 1. position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다. 이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다. 2. position: rel.. 2023. 10. 12.
[CSS] margin과 padding의 차이 Margin: Object와 화면과의 여백(외부여백) Padding: Object내의 내부여백 1. 속성 4개 사용 시계방향(위, 오른쪽, 아래, 왼쪽) 순서로 값을 주면 된다. Ex) margin : 10px 10px 10px 10px 2. 속성 2개 사용 2개의 속성만 사용할 경우, 첫번째 값은 위와 아래 / 두번째 값은 오른쪽과 왼쪽 여백을 의미한다. Ex) margin : 10px 10px 3. 속성 1개 사용 1개의 속성만 사용할 경우, 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용하게 된다. Ex) margin : 10px 4. 가운데 정렬 auto를 이용한다. padding은 auto값 선언 불가. Ex) margin : auto 2023. 10. 12.
[CSS] Display display 속성이란? display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성입니다. 사실 이렇게 들으면 감이 잘 안오는데 요소 크기를 어떻게 결정할건가 를 결정하는 속성이라고 이해하시는게 조금 더 감이 잘 잡히는 것 같습니다! display 속성값의 종류 none : 화면에서 사라집니다. 크기 자체도 차지하지 않습니다! 2. block : 일반적으로 설정하지 않아도 div가 갖게되는 기본값입니다. (태그에 따라 기본값이 다를 수 있습니다.) 기본적으로 width 가 자신의 컨테이너의 100% 가 되게끔 합니다. 쉽게 말하자면, 가로 한 줄을 다 차지하게 됩니다. 3. inline : 컨텐츠를 딱 감쌀정도의 크기만 갖게됩니다. block태그와 다르게 줄바꿈이 되지 않고, 반드시 컨텐츠를 감싸.. 2023. 10. 12.
[CSS] line-height line-height : 줄 높이 설정 2023. 10. 12.
[CSS] 폰트 설정하기 font-family : 글꼴을 설정하는 속성 serif : 삐침 있는 명조 계열의 글꼴 sans-serif : 삐침 없고 굵기가 일정한 고딕 계열의 글꼴 monospace : 글자 폭과 간격이 일정한 글꼴 cursive : 손으로 쓴 것 같은 필기 계열의 글꼴 fantasy : 화려한 글꼴 Ex) font-family: 'Nanum Gothic', sans-serif; => 삐침 없고 굵기가 일정한 나눔 고딕체 font-weight : 폰트 굵기 설정 text-decoration : 텍스트를 꾸미는 선 설정 none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다. overline : 글자 위에 선을 만듭니다. underline : 글자 아래에 선을 만듭니다. initi.. 2023. 10. 12.
[HTML] 자주 사용하는 태그 정리 div : 진짜 레알 많이 사용하는 태그. 섹션 안에서도 구분지을 때 사용. ul,li : 리스트 세트 태그. 리스트 세트 태그인데 웹사이트 메뉴바 만들 때도 사용한다. input : 검색란처럼 뭔가 입력 받을 때 사용. ex) span : 인라인 요소들을 하나로 묶을 때 사용한다고 한다. 아직 div와 구분이 가지를 않는다. h1,h2,h3… : 제목을 나타내는 태그. 뒤에 숫자가 커질수록 크기가 줄어든다. p : 단락을 나타낸다. 위,아래로 약간의 여백이 생긴다. a : 하이퍼링크를 정의할 때 사용한다. 아래 예시와 같이 사용하면 된다. Ex1) Ex2) Sign In , tag의 차이점 ■ : 화면 전체를 쓰는 애들. content에 해당하는 라는 텍스트가 행 전체를 차지하고 있다. ​ ■ : 자기.. 2023. 10. 12.
[HTML] header & section & footer 섹션을 나눌 때 사용하는 태그들이다. 하지만, 굳이 header & footer까지 사용해야 하는지 의문이다. 그냥 section 태그로 통일할 수 없을까? 하는 것이 내 생각이다. 물론 실제로 section으로만 통일해도 되고, 셋다 안 쓰고 div로만 쓰는 사람도 있는 듯 하다. 굳이 저걸 쓰는 이유는 요거란다. 그냥 다른 사람들도 코드를 볼 때, 쉽게 이해되라고 저런 식으로 태그명을 붙이는 것이란다. 정말 별거 아닌 이유군… 하지만 코드가 길어질 때 저런 식으로 section별로 나눠놓으면, 한 눈에 들어와서 관리하기 편하다. 2023. 10. 11.
반응형

티스토리툴바