본문 바로가기

Html&CSS71

0304_html5/css3_display:flex - (3)형태잡기 flex-basis:'값'px 형태잡기 -가로 세로 값을 각각 다 지정해주지 않아도 형태를 만들 수 있음 flex: 1 section article { flex:1; } - section article 영역 내부에 있는 개별 콘텐츠들을 1:1 의 비율로 만들어 줌 더보기 header article_1 article_2 article_3 footer 2020. 3. 5.
0305~_html5/css3_예제1_이미지 자료 2020. 3. 4.
0304_html5/css3_display:flex - (2)정렬,순서바꾸기 flex-derection, order 기본 정렬 순서 바꾸기 flex-direction: ; order: ; flex-direction : 정렬하기 - row, row-reverse, column, column-revers - 순서 뒤바꾸는 작업은 잘 하지 않음 - 주로 row 사용함 order : 배치되는 순서 정하기 - order값이 지정되지 않으면 작은 값(0) 바로 뒤로 이동 - z-index와 개념은 다르지만 원하는대로 순서를 바꿀 수 있음 flex-direction: row; (기본값) - 가로 정렬 .container{width: 600px; height: 100px; border: 2px solid #07c; display: flex; flex-direction: row; } .item1{ width: 200px; backgr.. 2020. 3. 4.
0227_html5/css3_display:flex -(1)기본정렬 space-between display: flex 유연한 박스를 만들 수 있음 - ie11부터 지원함으로 웹에서는 아직까지는 사용하기 어려움 - 모바일은 괜찮음 알아서 가로로 배치해줌. -비고) float를 이용해서 작업하려면, float해지하는 작업도 해야함 -웹상에서 flex로 작업한 것은 찾기 힘듦.(외국 사이트에서는 크롬 위주로 개발해서 찾기 쉬움) -모바일 용으로는 사용하기 유용 dispaly:flex; justify-cont: ; - 선택한 속성 대로 자동으로 정렬 함 justify-content: center - items를 가운데로 배치 .container{width: 700px; height: 100px; border: 2px solid #07c; display: flex; justify-content: cent.. 2020. 3. 4.
CSS(Cascading Style Sheets) 스타일 종류_2 텍스트 구분 입력 방식 설명 비고 개별성규칙 h3{color:red} .cascade{color:red;} .specifi{color:green;} 단계적 적용 단계적 적용 단계적으로 속성이 적용 주석 /*내용*/ 폰트 단위 기본(16px) p{font-size:12px;} p{font-size:1em; px단위-body기본크기를 무시하고 직접 지정한 단위로 표현 em단위-body기본크기를 기준으로 상속되어 표현 절대단위: pt, pc, cm, mm.. 절대단위: px, em.. 글꼴 p{font-family:"맑은 고딕", "malgungothic", sans-serif;} 복수로 지정하고 콤마로 구분한다. 처음에 오는 폰트가 대표폰트이고 뒤에 오는 폰트는 대체 폰트 색상 p{color:red;} p{.. 2020. 3. 4.
CSS(Cascading Style Sheets) 스타일 종류_선택자 스타일 구분 입력 방식 비고 인라인 스타일 요소에 직접 css스타일을 선언하여 구조와 표현의 분리가 안됨 외부 스타일 xhtml문서에 link요소를 이용하여 적용하는 방식, 로딩속도도 빠름 내부 스타일 xhtml문서의 head에 직접 선언하는 방식, 로딩속도가 느려질 수 있음 외부 스타일 link방식과 동일하게 연결, 구버전브라우저에서는 읽지 못하므로 권장하지 않음 선택자 구분 구분 입력 방식 비고 before, after p:before{content:"css시작";} p:after{content:"css끝";} 앞과 뒤에 content속성을 사용하여 지정, ie6 x class, id .lnb{color:red ;} class는 문서 내에서 여러 번 사용할 수 있는 선택자로, 요소 명과 클래스 명을 .. 2020. 3. 4.
HTML 태그 종류_HTML5(변경된 요소) 변경된 요소 태그명 태그 입력 방식 비고 a 블록요소도 포함할 수 있다. 단, a, button, embed, iframe, textarea, button 제외 em 강조: 강조할 부분을 변경하면 문장의 의미가 바뀌는 곳에 사용 strong 중요성: 강조라는 뜻을 가지고 있지 않은 곳에 사용 small 제목과 같은 주석(면책사항, 경고, 법적 제약, 저작권 등) s 정확하지 않거나 관련이 적다는 것을 표현 cite 인용하는 작품의 제목 i 목소리나 감정, 학명, 특정 전용어, 배 등 b 다른 문장과 구별(제품설명 제품명 등) u 본문의 표기와는 다른 형태를 나타내는 부분에 라벨 표현 table summary 폐지 속성 form의 새속성 태그명 태그 입력 방식 비고 autocomplete 자동 채움 on .. 2020. 3. 4.
HTML 태그 종류_HTML5(추가된 요소) 추가된 요소 태그명 태그 입력 방식 비고 section 장이나 절을 표현, 제목을 넣어서 사용 nav 사이트 내 이동하는 주요 내비게이션 표현 article 뉴스기사, 블로그 기사처럼 독립적인 컨텐츠(댓글, 게시판 투고 등) aside 메인컨텐트와 관련성이 적은 컨텐츠(광고, 블로그사이드바, 보충기사 등) hgroup h1~h6을 그룹화 header 페이지나 섹션의 머리말(로고, 목차, 검색폼, 내비게이션 등이 포함) footer 페이지나 섹션의 바닥글(저자 정보, 관련 페이지 링크, 저작권 표시 등) figure/figcaption - 문서의 본문에서 참조하는 그림을 표현 - 본문에서 그림을 이동해도 무관한 경우에 사용 time 날짜 및 시간 datetime속성을 지정하여 날짜와 시간을 나타낼 수 있음.. 2020. 3. 4.
HTML 태그 종류_HTML4 태그명 태그 입력 방식 비고 제목 태그(heading) h1~h6 문단 태그(paragraph) p 강제 줄 바꿈 태그 br 이미지 태그 img ☞width, height 생략 가능 ☞의미 없는 블릭 기호 alt="-" 순서가 없는 목록(Unorder list) ul 용어 정의 목록 (Definition list) dl 강한 강조 태그 (Stronger emphasis) strong 스크린리더기가 크게 읽음 강조 태그 (emphasis) em 구분선 태그 hr 링크 태그 a _blank, _self , _parent, _top iframe iframe 2020. 3. 4.
0227_html5/css3_선택자:nth-of-typenth-of-type()/ nth-child() /not() 코드보기 [더보기] 선택 더보기 [ last-child ] 마지막 자식요소를 선택하는 선택자 첫번째 자식요소 두번째 자식요소 세번째 자식요소 [ nth-of-type()/ nth-child() ] 몇번째 자식을 선택할 것인지 1) nth-of-type() : 해당하는 요소들 중 몇 번째 요소 2)nth-child():전체에서 몇번째 요소 1. 첫번째 p요소 -----------> 1 1.첫번째 strong요소 -----------> 2 2. 두번째 p요소 -----------> 3 2.두번째 strong요소 -----------> 4 3. 세번째 p요소 -----------> 5 3.세번째 strong요소 -----------> 6 [ not() ] :not() ()을 제외하고,~~ 지정/스크립트에서도 씀 2020. 3. 4.

티스토리툴바