목록전체 글 (48)
나만의 코딩 일지
박스 나열 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 끝부분 문서를 만들거나, 폴더를 만들 때 주의사항(이름, 문서, 폴더, 파일, 선택자 --> 전부 적용) 영문으로 작성해야 한다. 대소문자를..
lex 박스 레이아웃 플렉스 박스 레이아웃(flex box layout)이란 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치하는 것이다. 이 플렉스 박스를 이용하면 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있다. flex 레이아웃 사용방법 flex 레이아웃은 display 속성을 이용해 flex 레이아웃을 지정한다. flex 레이아웃은 block속성과 inline속성과 달리 레이아웃을 지정하려는 위치에 직접 레이아웃을 지정하는 것이 아니라 부모 태그에 flex 레이아웃을 지정해줘야 한다. flex 레이아웃은 기본적으로 왼쪽에서 오른쪽으로 수평 방향으로 박스가 나열된다. (inline 레이아웃과 같은 속성을 갖는다.) flex 레이아웃의 진행 반향을 주축이라고 하며 주축의..