css 공부한 내용

안녕하세요. 웹클래스입니다. 현재는 공부하면서 취업준비생입니다. (공부한 내용을 기록한 글입니다.)

가로 정렬 HTML 코드 CSS 코드 설명 - 부모의 width 값 작성합니다. - 자식한테 width 값 주고 싶은 만큼 주고 margin: 0 auto; 작성하면 가운데 정렬이 됩니다.

절대경로 다른 서버에 있는 이미지, 파일 등 주소로 연결시켜줍니다. 절대경로 설명 웹사이트 주소으로 시작합니다. 상대경로 현재 폴더에서 경로를 지정하고 연결시켜줍니다. 상대경로 설명 파일에서 url 경로는 ../ 으로 시작합니다. ../ 상위 디렉토리 ./ 현재

css 코드 작성규칙 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언합니다. 대표적으로 css 작성 순서 레이아웃 : display float position css 박스모델 : width height margin padding border 배경 : background 폰트 : font color text-align vertical...

텍스트 "..." 하기 css 속성 text-overflow 속성값 ellipsis 으로 텍스트를 생략합니다. 코드설명 width: 500px 가로사이즈를 정하면 500px 안에서 줄바꿈이 됩니다. 텍스트가 한 줄로 생략되서 나타나게 해주기 위해 텍스트를 다시 줄바꿈

영어 대문자로 바꾸기 css 속성 text-transform 속성값 uppercase 으로 모든 글자를 대문자로 바꿔줍니다. 설명 webclass 소문자를 대문자로 바꿔줍니다.

각도(회전하기) css 속성 transform 속성값 rotate(45deg) 으로 각도를 조절합니다. 코드설명 rotate(45deg) 의 deg 는 각도의 단위입니다. 45deg는 45도 를 나타내고 135deg 는 135 도를 나타냅니다.

after 마지막 요소 없애기 css 마지막 요소 없애주는 속성은 last-child 입니다. 마지막 after 의 content 를 없애줘야해서 속성값 none 를 작성합니다.

font-weight 속성값 알아보기 숫자의 의미를 알아봅시다. 설명 100 : Thin 200 : Extra Light 300 : Light 400 : Normal 500 : Medium 600 : Semi Bold 700 : Bold 800 : Extra Bold 900 : Black bold 는 700 대랑 똑같습니다. normal 는 400 대랑...

상속은 상위(부모 태그) 태그에 적용된 속성은 하위(자식 태그) 태그한테도 적용이 되는 것을 의미합니다. 상속 기능이 없다면 각 태그마다 css속성을 작성해야 합니다. 하지만 모든 속성이 상속되지 않습니다. 상속이 되는 것과 되지 않는 것이 있습니다.

background 작성법 css에서 background 속성값으로 color image position 등 있습니다. 속성과 속성값 하나씩 하나씩 작성하는 방법도 있고, 속성 하나만 쓰고 속성값을 한 줄로 작성하는 방법도 있습니다. 1. 속성과 속성값 하나씩 작성하기 코드 참고 2. 속성값 한 줄로 작성하기 코드 참고

블록 블록은 브라우저의 한 줄 차지합니다. 인라인 인라인은 콘텐츠만큼 차지합니다. 인라인-블록 인라인이랑 블록이랑 합친 상태로 보여집니다.

width: 100% 는? width: 100% 는 마진, 패딩, 보더 영역을 다 포함한 값으로 나옵니다. 포함하지 않고 해결방법은 box-sizing: border-box; 로 해주면 된다. width: auto 는? width: auto 는 블록요소의 초기값으로

position 가운데 정렬 position 에서는 margin: 0 auto; 안됩니다.

마진겹칩 또는 마진병합 현상 (margin collapsing) 마진겹칩은 세로에서만 현상이 나타난다. 인접해있는 블록요소끼리만 일어난다. 부모블록요소안에 자식블록요소 2명 있는데 자식블록요소 2명한테 margin-top주면 자식한테 먹는게 아니라 부모한테 적용이

float을 해제하는 방법 부모에게 높이를 준다. 부모에게 float을 준다. 부모에게 overflow: hidden을 준다. 부모의::after에 clearfix를 한다(구조에 따라 ::before나 자식에게 할수도있음) float의 장단점이 있으니깐 알맞게 사용하

부모 요소에 border를 주거나(울타리를 쳐서 안에서 밖으로 못나가게)부모 요소에 padding을 주거나(상자 - 뽁뽁이 - 물건 순으로 택배를 포장하듯)부모 요소에 overflow: hidden을 주거나(자식 요소가 뭐든지 부모 요소를 기준으로 하게끔)inline-

img 태그의 공백 이미지태그의 공백은 화이트스페이스가 들어가서 생기는 현상입니다. 이를 해결하고자할 때 img 속성을 vertical-align: top; display block 로 해주시면 공백이 제거가 됩니다. 주로 vertical-align: top; 많이 사

css는 html을 꾸며주는 언어다. html정보를 표현을 한다면 css는 정보를 꾸며주는 것입니다. css는 html정보를 표현하는 언어인데 html가 존재하지 않으면 css는 무용지물이 됩니다. html코드가 똑같고, css으로 레이아웃을 다양하게 바꿀 수 있습니다.

css 문법 선택자: h1 속성: color width 값: yellow 선언: color: blue; width: 500px; 선언부: {color: blue; width: 500px;} 규칙: h1 {color: blue; width: 500px;} css 속성

<img> 연관되는 태그 알아보기 ` 태그를 사용하여 ` 태그를 감싸주는 요소 ` 태그는 ` 정의하는 요소(이미지 설명하기)

`` 태그는 html5에서 새롭게 추가된 태그입니다. PC버전, 모바일버전 이미지를 따로 보여줄 때 사용됩니다.

text-align: justify; 좌우로 균등하게 정렬 되는데 띄어쓰기가 많이 발생됩니다. word-break: break-all; 띄어쓰기 발생을 방지하고자 사용합니다.

margin 가운데 정렬 inline 요소에서는 margin: 0 auto; 안됩니다.

블록 계열 인라인 계열

콘텐츠 3개가 나란히 있는 상황에서 콘텐츠의 왼쪽에 여백을 줘야하는데 margin-right: 20px; 주면 마지막 3번째가 마진이 있어서 사이즈안에 들어오지 않습니다. 그러므로 :list-child 사용하면 코드가 하나 더 생깁니다. 이를 일반적인 생각인데 더욱 더

transition 속성값을 부드럽게 해주는 일이다.

:root 코드 사용 예시 css 가상 클래스 :root 만들고 {} 중괄호 안에 프로퍼티(property), 값(value) 작성합니다. 작성할 때 주의사항은 -- 앞에다 표기하고 프로퍼티: 값 을 작성합니다.

안녕하세요. 웹클래스입니다. (v1.0.0) 현재는 공부하면서 취업준비생입니다. 현재 취업 준비생이라서 부족한 점이 많습니다. 수정사항 및 추가사항이나 피드백 댓글 달아주시면 빠른시내에 수정하겠습니다. 방문해주셔서 감사합니다. 01. css 우선순위이란?

float 설명 레이아웃 배치할 때 많이 사용되고 있는 float 속성입니다. float 사용법

transition-duration: 1s 는 소요되는(나타나는) 시간 transition-delay: 5s 는 기다려야 하는 시간 한줄로 사용하면 transition: 1s 5s;5초 기다리고 1초안에 나타나기

position: absolute; 하면 자동으로 display: block; 자동으로 된다.

padding 주면 background 에 영향에 가니까 마진으로 준다.

white-space: nowrap;

링크

position: fixed; 기준값은 body다.

형태\_의미\_상태 이 순서로 네이밍 작성하시면 됩니다.

X 이거는 li 안에 형제가 span p div 있고 nth-child(2)해도 안된다. 그 이유는 span 의 2번째 형제요소를 가르키는데 2번째가 span 아니고 p 라서 안된다. O 이거는 li 안에 형제가 span 으로 3개가 있고 nth-child(2)하면 span 의 2번째가 형제요소span 이라서 적용이 된다.

transform 수치는 3자리까지 가능하다.

img 태그 ::after 넣을 수 없습니다.

width: width: calc(100% / 3);