나만의 코딩 일지

overflow 넘치다, 넘쳐나다 라는 뜻을 가진다. 요소 내의 콘텐츠가 너무 커서 요소 내에 모두 보여주기 힘들 때 내용물에 어떻게 보여줄지를 지정하는 속성 overflow가 가지는 속성들 hidden : 영역을 벗어나는 부분이 보이지 않게 처리 scroll : 영역을 벗어나는 부분의 양에 상관없이 스크롤바가 형성 auto : 요소가 영역을 넘지 않으면 스크롤바가 나오지 않고, 요소 안에 내용물이 넘치는 경우에 스크롤바가 형성 콘텐츠양이 일정 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1..

박스 나열 float float은 띄우다, 나열하다라는 뜻으로 말 그대로 박스를 나열하고자 할 때 사용하는 속성이다. float 기본 속성 none : 나열하지 않음 left : 외쪽으로부터 나열 right : 오른쪽으로부터 나열 initial : 기본 값으로 설정 inherit : 부모 요소로부터 상속 왼쪽으로 나열 box1 box2 box3 오른쪽으로 나열 box1 box2 box3 clear "해제한다"라는 의미를 갖는다. float와 함께 사용 float을 제거할 때 사용 clear 기본 속성 left : 좌측 나열을 제거 right : 우측 나열을 제거 both : 양쪽 나열을 제거 box1 box2 box3 float의 외쪽으로 나열돼 있던 box3이 clear의 left 속성을 지정해 왼쪽 ..

글자 관련 속성 color: 색상을 뜻하며 정확히는 글자 색상을 뜻한다. font-size : 글자 사이즈 - px, em, pt... 단위 font-weight : 글자의 굵기 - 100 ~ 900 [100-300 : 가늘게], [400-600 : 중간], [700-900 : 굵게] font-family : 글꼴 - 내 컴퓨터에 저장된 글자가 표현(웹 폰트 예외) font-style : 글자 스타일 - italic, normal 등 line-height : 행간, 줄 간격 - px, em, pt, %...단위 letter-spacing : 자간, 글자 사이의 간격 - 숫자 입력(px, %...) text-align : 문단 정렬(글자 정렬) - left, right, center text-decorat..

CSS 속성 글자 관련 속성 color: 색상을 뜻하며 정확히는 글자 색상을 뜻한다. font-size : 글자 사이즈 - px, em, pt... 단위 font-weight : 글자의 굵기 - 100 ~ 900 [100-300 : 가늘게], [400-600 : 중간], [700-900 : 굵게] font-family : 글꼴 - 내 컴퓨터에 저장된 글자가 표현(웹 폰트 예외) font-style : 글자 스타일 - italic, normal 등 line-height : 행간, 줄 간격 - px, em, pt, %...단위 letter-spacing : 자간, 글자 사이의 간격 - 숫자 입력(px, %...) text-align : 문단 정렬(글자 정렬) - left, right, center text-..

CSS CSS란 각 요소들이 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어로, 홈페이지의 스타일 즉 디자인 요소를 담당한다. CSS 기본 구조 외부 스타일 시트(External style sheet) 외부에 작성된 .CSS 문서 즉 스타일 시트 파일을 연결하여 적용하는 방법 내부 스타일 시트(Internal style sheet) 태그에태그를 사용하여 CSS 스타일을 적용하는 방법 인라인 스타일(Inline style} HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법 (실무에서는 권장하지 않음) 선택자 특정한 요소를 선택 해주는 것 -> 선택자라는 것을 통해 특정 요소들을 선택하여 스타일을 적용 전체 선택자 */ html 등장하는 모든 형태를 선택하는 선택자(초기..

이미지 태그 이미지를 나타내줄 수 있는 태그 단독 태그 하나의 폴더 안에 들어가는 것은 "/"를 사용 글자와 같이 나열되는 성격을 지니며 이미지의 단락을 구분 지을 때는 을 사용 img 태그 img 태그 alt 주석문, 이미지가 안 보일 때를 대비한 대체 문자 html5 기본 규칙 alt 문법을 사용하면 이미지 경로를 잘 못 작성해서 이미지가 깨져서 나와도 그 이미지가 어떤 이미지인지 바로 알 수 있다. 이미지 경로를 정확하게 작성했을 때는 alt 태그에 이미지 이름은 화면 상에 나오지 않는다. figure 이미지, 사진, 삽화, 오디오, 비디오 등 콘텐츠를 담을 때 사용 figcaption figure 요소 안에서 사용 그 요소에 대한 설명하는 문구를 담는 태그 figrue 요소에서 한 번만 사용 가능..

글자를 꾸며주는 태그들 볼드체 표현 경고, 주의사항과 같이 중요한 내용물을 강조할 때 보통 사용 글자를 굵게 사용하고 싶을 때 글자 내용 or 글자 내용 경고, 주의사항과 같이 중요한 내용물을 강조할 때 경고, 주의사항과 같이 중요한 내용물을 강조할 때 글자를 굵게 표현하고 싶을 때! 글자를 굵게 표현하고 싶을 때! 이탤릭체 표현 주위 텍스트에 비해서 강조된 부분이나 저자의 생각을 강조할 때 이탤릭체로 표현하고 싶을 때 글자 내용 or 글자 내용 주위 텍스트에 비해서 강조된 부분이나 저자의 생각~강조! 주위 텍스트에 비해서 강조된 부분이나 저자의 생각~강조! 이탤릭체를 표현하고 싶을 때! 이탤릭체를 표현하고 싶을 때! 인용 표현 인용할 문구를 표현 따옴표가 같이 나타난다 글자와 같이 나열되며 짧은 부분의..

TAG 구조와 문법 태그 사용법 태그는 꺾쇠를 이용해서 사용하고 앞에 가 시작 태그이고 뒤에는 끝 태그이다. html 기본 구조 : 지금 사용하는 문서 타입은 HTML 형식을 사용한다. : HTML 문서의 시작을 알리며 lang 속성을 사용해 문서에서 사용할 언어를 지정한다. 휴먼 랭귀지란? lang는 휴먼 랭귀지를 뜻하며 language의 약자이다. [한국(korean) : ko, 영어(english) : en, 일본(japan) : ja, 중국(china) : zh] : head 끝부분 : 실제 브라우저 화면에 표시되는 영역이다. : body 끝부분 : html 끝부분 문서를 만들거나, 폴더를 만들 때 주의사항(이름, 문서, 폴더, 파일, 선택자 --> 전부 적용) 영문으로 작성해야 한다. 대소문자를..