HTML5 썸네일형 리스트형 [HTML/CSS] 박스 모델 알아보기 & 관련 속성 알아보기 (Box Model) 콘텐츠를 박스 형태로 정의 하는 방법을 박스 모델이라고 합니다 요소들을 원하는 위치에 배치하기 위해서는 박스 모델에 대해서 알아야 합니다 박스 모델에 대하여 알아보기 전에 블록 레벨 요소와 인라인 레벨 요소에 대하여 알아야 합니다 관련 포스트 [HTML] 블록 레벨 요소(Block Level Element)와 인라인 레벨 요소 (Inline Level Element) 박스 모델 (Box Model) 박스 형태의 콘텐츠로 이와 같은 형태인 요소를 박스 모델 요소라 함 블록 레벨 요소는 전부 여기에 속함 박스 모델 구성 분류 콘텐츠 영역 (contents) 패딩 (padding) 테두리 (border) 마진 (margin) TIP! 박스의 기본 값 상태를 static 상태라고 합니다 박스 모델 구성 요소 ●.. 더보기 [CSS] 테두리 만들기 (Border) 테두리는 박스 요소뿐만 아니라 다양한 요소에 넣을 수 있습니다 테두리 기본 속성 ● border-style 테두리 스타일을 지정하는 속성 기본 문법 예시 border-style : none | solid | dashed | dotted | double 속성 값 설명 기타 none 선을 표시하지 않음 기본값 solid 실선으로 표시 dashed 짧은 선으로된 점선으로 표시 dotted 점선으로 표시 double 두 줄로 표시 두 줄 사이의 간격은 border-width로 지정 이 외에 속성값 알아보기 ● border-width 테두리 두께를 지정하는 속성 기본 문법 예시 border-width : | thin | medium | think border-top-width : | thin | medium | .. 더보기 [CSS] 텍스트 스타일 알아보기 2 (TEXT) 전 포스트는 텍스트 스타일 중 글자, 단어와 돤련된 속성들이였습니다 이번에는 문단과 관련된 속성들에 대하여 알아보겠습니다 텍스트 스타일 관련 속성 1. text- align 글의 수평 정렬을 지정하는 속성 기본 문법 예시 text-align : left | right | center | justify 2. text- align-last 선택한 요소에서 마지막 라인만 수평 정렬 지정하는 속성 기본 문법 예시 text-align : auto | left | right | center | justify 속성 값 기능 left 좌측 정렬 right 우측 정렬 center 가운데 정렬 justify 양쪽 정렬 3. direction 글을 쓰는 방향을 지정하는 속성 기본 문법 예시 direction : ltr | .. 더보기 [CSS] 텍스트 스타일 알아보기 (TEXT) 이전에 포스트한 적 있지 않나? 라고 생각하실 수 있겠지만 폰트 스타일과 텍스트 스타일은 다른 개념입니다 폰트 스타일은 글꼴, 폰트와 관련된 개념이였다면 텍스트 스타일은 글자, 단어그리고 문단과 관련된 개념입니다 텍스트 스타일 관련 속성 1. color 글자에 색을 지정하는 속성 기본 문법 예시 color : color-name | 16진수 | rgb | hsl 2. text-decoration 텍스트에 장식줄 표시하는 속성 기본 문법 예시 text-decoration : 속성 기능 속성 값 기능 기타 text-decoration-line 선의 위치 지정 none 밑줄 없음 기본값 underline 밑줄 표시 링크 기본값 overline 윗줄 표시 line-through 가로지르는(취소줄) 표시 text.. 더보기 [CSS] 절대 크기와 상대 크기 알아보기 CSS에서 크기를 지정하는 방법으로 절대 크기와 상대 크기가 있습니다 각각의 장단점을 알고 활용할 수 있어야 합니다 절대 크기와 상대크기 비교 절대 크기 상대크기 정의 지정된 크기 주변 요소에 상대적인 크기 차이점 사이즈가 바뀌지 않는 요소 일 때 유용함 접근성의 문제가 있음 주변 요소에 따라 크기가 달라져 비율을 일정하게 유지 가능 사용자가 직접 읽기 적합한 환경을 설정 가능 절대크기 주변 요소에 영향을 받지 않는 지정된 크기 ● px 기본적인 단위 브라우저 기본 글꼴 크기 : 16px TIP! px값은 지정된 크기에서 변하지 않아 코딩 시 틀을 잡을 때 유용합니다. 브라우저 확대/축소로 인한 크기 조절은 가능합니다 상대크기 주변 요소에 따라 지정되는 크기 사용자가 브라우저 메뉴에서 크기를 변경할 수 .. 더보기 [HTML/CSS] 하이퍼링크 생성하기 웹 사용이 더욱 편리해지는 '링크' 하이퍼링크 생성하기 클릭으로 연결된 곳에 즉시 이동하여 웹 사용을 더욱 편리하게 해준는 기능 링크 태그 a 태그 - 링크 생성 해당 페이지에서 다른 페이지로 이동 시 사용 텍스트 or - 앵커 생성 a태그와 id 속성을 이용하여 한 페이지 내에서 링크 만들 수 있음, 내부 링크를 통해 그 곳으로 이동 내용 - 다운로드 링크 생성 다운로드할 수 있는 링크를 생성. #을 사용하면 해당 파일의 페이지(#page=페이지 번호)나 북마크(#bookmark)를 이용해 열 수 있음 텍스트 TIP! 서버에 올렸을 때 브라우저에 따라 오류가 있는 경우가 있습니다. 해서 복잡한 것 말고 간단한 다운로드의 경우 이용합니다. 오류 - 다운로드 받은 파일이 깨져있을 수 있습니다 - 브라우저에.. 더보기 [CSS] 폰트 스타일 알아보기 (Fonts) 웹 사이트에 적합한 글꼴를 사용하는 것은 브랜드의 아이덴티티를 구축하고, 가독성을 높여 사용자가 이용하기 보다 편리해집니다 폰트 FONTS ● Web Safe Font 브라우저나 기기에 기본적으로 설치되어있는 폰트 글꼴이 설치되어 있지 않거나 정상적으로 설치되지 않은 경우도 있기때문에 100% 안전한 웹 세이프 폰트는 없습니다 그렇기에 백업 폰트에 폴백 폰트를 작성해야합니다. html,css에서 가장 사용하기 좋은 웹 세이프 폰트 목록 Arial, Verdana Helvetica Tahome Trebuchet MS Times New Roman Georgia Garamond Courier New Brush Script MT ● Fallback Font 범용 글꼴 범용 글꼴 패밀리 목록 Serif : 가장 .. 더보기 [CSS] CSS 선택자 (Selector) CSS 선택자 (Selector) HTML에서 스타일을 적용하고 싶은 요소를 선택하는 것 선택자 분류 단순 선택자 (Simple selectors) 요소명, class명, id명 등으로 선택하는 가장 기본적인 선택자 콤비네이션 선택자 (Combinator selectors) 단순 선택자의 관계에 근거하여 선택하는 선택자 가상 클래스 선택자 (Pseudo-class selectors) 요소의 특정 상태에 따라 선택하는 선택자 가상 요소 선택자 (Pseudo-elements selectors) 요소의 지정부분을 선택하는 선택자 속성 선택자 (Attribute selectors) 포함 하고 있는 속성과 속성값에 따라 지정하는 선택자 선택자 종류 1. 전체 선택자 모든 요소에 적용 * { } 2. 요소명 선택자.. 더보기 [CSS] CSS (Cascading Style Sheets) 기본 CSS (Cascading Style Sheets) 스타일 규칙들을 한 눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓은 것 HTML 요소가 화면에 표시되는 방법을 작성한 스타일 시트 CSS 사용 이유 - 작업 시간 단축 html만 사용할 경우 일일이 스타일 지정 - 전체 스타일 제어 css파일은 외부 파일로 저장하여 제어가능 - 유지 보수 편의성 증가 가독성이 증가하므로 유지 보수 시 편함 스타일 시트 원칙 ● 캐스케이딩의 원리 (Cascading) 스타일간의 충돌을 막기 위해 ‘위에서 아래로 흐르며 적용되는 방식’으로, 같은 선택자의 같은 속성명 일 때, 속성값이 다르면 하단의 속성값을 적용 (=top-down방식) ● 스타일 상속 자식요소에서 따로 스타일을 지정하지 않으면 부모요소에 .. 더보기 [HTML/CSS] 목록을 만드는 태그 (List Tag) 목록 태그 - 리스트 문서에서 항목을 나열하는 목록을 생성 시 사용하는 태그 HTML에 리스트 관련 태그 종류 순서가 있는 리스트 (Ordered List) 순서가 없는 리스트 (Unordered List) 리스트 항목 (List) 정의형 리스트 (Description List) 정의형 리스트에서 용어 또는 이름 (Description Term) 정의형 리스트에서 해당 용어의 정의 (Description Details) HTML에 리스트 태그 종류 1. 순서가 있는 리스트 (Ordered List) - ol, li 순서가 있는 리스트의 태그는 로 정의 리스트의 항목을 로 정의 리스트 요소 앞에 숫자, 영문 등 순서를 알 수 있는 마커가 삽입됨 기본값 예시 리스트기본001 리스트기본002 리스트기본003 .. 더보기 [HTML] 특수 문자 작성 엔티티 코드(Entity Code) 엔티티 코드 (Entity Code) html에는 미리 예약된 문자가 있으며, 이러한 문자들을 예약어라 부름. html에서 해당 예약어를 사용할 경우 미리 예약된 방식으로 사용되므로 이를 기존의 사용 방식으로 사용하기 위하여 사용하는 문자셋을 의미. 엔티티 코드를 제외한 특수문자는 에러로 인식하므로 엔티티 코드로 작성하는 것이 좋음. 자주 사용하는 코드 엔티티 코드 문자식 표현(Entity Code) 숫자식 표현(Entity Number) › › © © © " " " & & & (공백) 엔티티 코드 사이트 https://www.w3schools.com/charsets/ref_html_entities_a.asp https://entitycode.com/ https://www.toptal.com/design.. 더보기 [HTML] 에밋(emmet) 알아보기 에밋 (emmet) = 젠코딩 자동완성 플러그인. 코딩 시 태그를 빠르고 쉽게 작성하는 방법. 간단한 코드만 입력하면 자동으로 완성해줌. 사용 방법 해당 약어들을 차례대로 작성 후 Tab 작성 방법 약어 약어 기능 작성법 결과 . 클래스 생성 .classname # 아이디 생성 #idname * 반복 생성 table>tr>td*2 [] 속성 생성 a[href=#] () 그룹 생성 table>(tr>td*3)*3 {} 텍스트 작성 div{작성내용입니다} 작성내용입니다 $ 숫자. 증가값 표시 li#num$*3 요소를 작성하지 않으면 div로 생성 .newClass 코드 작성 표시 기능 작성법 결과 > 자식 요소 생성 부모 > 자식 ul>li + 형제 요소 생성 형제 + 형제 dl>dt+dd ^ 올리기 다른 .. 더보기 이전 1 2 다음
