본문 바로가기

All78

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.
0227_html5/css3_단락나누기, column-cont/column-width [ column ] 단락 나누기 /ie 10부터 가능 SKT “5G 실내 중계기 기술력 유럽 뚫었다” (지디넷코리아=박수형 기자)SK텔레콤(대표 박정호)은 도이치텔레콤과 함께 국내 기술 기반으로 개발한 5G RF 중계기를 2분기 중 독일 주요 도시에 구축한다고 27일 밝혔다. 5G RF중계기는 실외 기지국의 5G 전파를 받아 빌딩, 터널, 지하공간 등 전파가 닿기 어려운 실내로 증폭시켜 전파 도달 범위를 넓히는 장비다. 유선망 없이 신호를 중계하기 때문에 유선망이 국내보다 열악한 유럽에서 높은 관심을 보이는 기술이다. 지난해부터 국내 주요 건물에 설치되고 있는 5G RF 중계기를 두고 SK텔레콤과 도이치텔레콤은 독일을 비롯한 유럽 환경에 맞게 개선했다. 양사는 이달부터 중계기 현장 테스트를 진행하고, 올.. 2020. 3. 4.
0227_html5/css3_animation-3 [ animation ] 애니매이션:반복적인 패턴의 움직임 - animation은 반드시 @keyframes과 같이 써야함 animation 코드보기 [더보기]선택 더보기 [ animation ] 애니매이션:반복적인 패턴의 움직임 - animation은 반드시 @keyframes과 같이 써야함 animation 2020. 3. 4.
0227_html5/css3_animation-2 [ animation ] 애니매이션:반복적인 패턴의 움직임 - animation은 반드시 @keyframes과 같이 써야함 animation 코드 보기 [더보기] 선택 더보기 [ animation ] 애니매이션:반복적인 패턴의 움직임 - animation은 반드시 @keyframes과 같이 써야함 animation 2020. 3. 4.

티스토리툴바