Salangdung_i의 기록

프로젝트를 구현하면서 헷갈리는 CSS이 있었다. 이번 포스팅은 내가 헷갈려하는 CSS들의 정리한 것이다. CSS와 박스 모델 CSS 박스 모델이란, 박스 형태의 모델이다. 이 박스 모델들이 모여 웹문서를 이룬다. 또한 그 안에는 margin과 padding, border 등 여러 겹의 박스가 들어있다. 블록 레벨 요소 VS 인라인 레벨 요소 박스 모델은 블록 레벡 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 블록 레벨 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미이다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. width, margin, padding 등을 이용해 크기나 위치를 ..

justify-content : 아래를 인자값으로 받아 요소들을 가로선 상에서 정렬한다. start : 기본 축에서 정렬 컨테이너의 시작 가장자리를 향해 서로 같은 높이로 정렬됩니다. end : 주 축에서 정렬 컨테이너의 끝 가장자리를 향해 서로 같은 높이로 정렬된다. flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다.( 맨 첫요소 좌측과 맨 마지막요소의 우측의 간격을 두지 않음) space-around: 요소들 주위에 동일한 간격을 둡니다.( 양옆으로 동일한 간격) align-items : 아래를 인자로 받아 요소..

13 단계 #pond { display: flex; flex-direction:row-reverse; justify-content:center; align-items:end } 14 단계 #pond { display: flex; } .yellow { order: 1; } 15 단계 #pond { display: flex; } .red { order: -1; } 16 단계 #pond { display: flex; align-items: flex-start; } .yellow { align-self:flex-end; } 17 단계 #pond { display: flex; align-items: flex-start; } .yellow { order: 1; align-self:end } 18 단계 #pond {..

1 단계 #pond { display: flex; justify-content:end; } 2 단계 #pond { display: flex; justify-content:center; } 3 단계 #pond { display: flex; justify-content:space-around; } 4 단계 #pond { display: flex; justify-content:space-between; } 5 단계 #pond { display: flex; align-items:end; } 6 단계 #pond { display: flex; justify-content:center; align-items:center; } 7 단계 #pond { display: flex; justify-content:space-a..

block , inline 요소 display position 1. block , inline 요소 HTML은 block 요소와 inline 요소로 나눌수있다. 간단하게 생각하면 block요소는 콘텐츠의 크기에 상관없이 한줄을 다 차지하는거고, inline 요소는 콘텐츠의 크기만큼의 너비를 차지하는 것이다. 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다. 인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지합니다. 콘텐츠 모델 : 일반적으로 블록 레벨 요소는 인라인 요소와 (때때로) 다른 블록 레벨 요소를 포함할 수 있습니다. 이런 고유한 구조적 차이점으로 인해 블록 레벨 요소는 인라인 요소보다 더 "큰" 구조를 생성할 수 있습니다. ..

css에서 이렇게 하는 것을 하드코딩으로 본다. 이렇게 코딩하기보단 변수를 지정해서 하는것이 좋다. 변수를 선언할 때는 아래와 같이 ' --변수명 : 속성' 으로 지정한다. --somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); 사용할 때는 var(변수); 로 아래와 같이 사용한다. 변수를 선언할때 부모노드에서 선언했다면, 변수의 사용은 부모노드와 자식레벨에서 사용이 가능하다. html CSS variables study CSS variables study css : first 에서 변수를 선언하면 자식레벨인 .first li 에서는 사용가능하지만 .second에서는 적용되지 않는다. .first { -..

font-family - 글꼴을 지정하는 속성 font-size - 글자 크기를 지정하는 속성 font-weight - 글자 굵기를 지정하는 속성 color - 글자 색을 지정하는 속성 text-align - 텍스트 정렬 방법을 지정하는 속성 line-height - 줄 간격을 조절하는 속성 font-family font-family:[,,] body { font-family:"맑은 고딕", 돋움, 굴림} // 문서전체에 "맑은 고딕" 만약 없다면 돋움, 돋움도 없다면 굴림 적용 @font-face - 웹 폰트 사용 @font-face { font-family:글꼴 이름; src:url(글꼴 파일 경로) format(파일 유형); } 구글 폰트 : https://fonts.google.com/earlya..

HTML로 스타일로 작업을 하지 않고 따로 스타일을 사용하는 이유는? 웹 문서의 내용과 상관없이 디자인만 바꿀수 있다. HTML - 웹 문서의 내용을 담당 CSS - 웹 문서의 디자인을 담당 CSS 기초 - 스타일 시트를 정의하는 태그 * { 속성 } - 문서 전체에 스타일을 적용하는 전체 선택자 태그 { 속성 } - 태그에 스타일을 적용하는 태그 선택자 .스타일 이름 { 속성 } - class 속성으로 묶은 특정 부분에만 스타일을 적용하는 클래스 선택자 # 스타일 이름 { 속성 } - id 속성으로 묶은 부분에만 스타일을 적용하는 Id 선택자 이름1, 이름2, .. { 속성 } - 여러 항목에 같은 스타일을 적용하는 그룹 선택자 할로윈 할로윈, 또는 핼러윈(영어: Halloween, Hallowe'en..

object : 웹 문서에 외부 파일을 삽입하는 태그 audio : 오디오 파일을 삽입하는 태그 video : 비디오 파일을 삽입하는 태그 source : 모든 브라우저를 지원하기 위해 다양한 형식으로 변환된 비디오를 삽입하는 태그 track : 비디오에 자막 파일을 연결해 표시하는 태그 태그와 태그 - 플러그인 사용하기 플러그인 : 웹 브라우저에서 처리 할수 없는 작업을 위해 웹 문서안에 포함시킨 외부 프로그램 기능 태그의 속성 data : 외부 파일의 경로를 지정합니다. type : 포함시킨 내용의 유형을 지정합니다. name : 다른 요소들과 구분할 수 있는 이름을 지정합니다. width : 포함시킨 내용의 너비 값을 지정합니다. height : 포함시킨 내용의 높이 값을 지정합니다. 태그 auto..