728x90 반응형 스마트인재개발원/HTML,CSS14 [CSS] 스타일시트 선언 종류 / 사용 방법/ 우선순위 ( 인라인스타일|내부스타일|외부스타일|임포트방식) 스타일시트 선언방식 종류 1. 인라인 스타일 방식 2. 내부 스타일 방식 3. 외부 스타일 방식 4. 임포트 방식 1. 인라인 스타일 방식 : 요소 내 style속성으로 스타일 지정 : 태그 안에 style속성 추가 가능 ex) 인라인스타일 2. 내부 스타일 : head요소 내 style요소 생성한 후 스타일 지정 3. 외부 스타일 : 태그로 외부파일에 접근하여 스타일 지정 ex) .css파일 새로 만들기 .css파일에 style태그 내에 선언하는것 똑같이 작성 html head에 link태그 추가 4. 임포트 방식 : 스타일시트 안에 @import 이용해 외부파일의 스타일 지정 ex) @import url(mycss.css); html에서 p태그 생성(+아이디 지정) css파일 만들어서 style태그 .. 2022. 10. 6. [CSS]z-index/overflow/애니메이션 만들기예제 Z-INDEX overflow visible : 기본값 hidden : 영역을 벗어나는 컨텐츠 보이지 않게함 scroll : 영역에서 벗어나는 부분은 스크롤 생성 auto : 영역 벗어나면 스크롤, 안넘치면 스크롤바 생성 애니메이션 만들기 style태그 animation-nameanimation : 이름 지정 하기 position : relative 로 지정 animation-duration : 몇초간격으로 둘건지 (애니메이션 생명주기) animation-iteration-count : infinite; -> 무한반복 animation-direction=alternate; -> 애니메이션 방향지정(alternate : 왔다갔다) animation-delay -> 애니메이션 지연시간 animation-pl.. 2022. 10. 5. [CSS]position - static/relative/absolute/fixed 정의, 사용법 header : 머리글, 제목, 헤더 nav : 네비게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간 position : 자유자재로 요소의 위치를 배치하는 속성 속성값 설명 static 태그가 위에서 아래로 순서대로 배치(기본값) relative 초기 위치 상태에서 상하좌우로 위치이동 absolute 절대 위치 좌표 설정 fixed 화면을 기준으로 절대 위치 좌표 설멍 1. relative속성 - top : 위에서 누른다(=아래로 이동) - left : 왼쪽에서 누른다(=오른쪽으로 이동) - right : 오른쪽에서 누른다(=왼쪽으로 이동) - bottom : 아래에서 누른다(=위로 이동) 2. absolute 속성 - span태그를div태그로 감싸주기 - position: absolut.. 2022. 10. 5. [CSS] border/ margin/ padding 예제 Box Model - 요소에 부피감을 결정하는 개념 - 웹페이지의 레이아웃 및 디자인 설계시 Margin 마진 상쇄현상 : 마진 영역이 겹치는 경우에 둘중에 더 큰 마진영역만 잡힘 Margin 사용법 Margin 사용한 예제 padding : 테두리를 기준으로 요소의 안쪽여백 지정 border : 테두리 굵기, 선타입, 선색깔 속성 조절 2022. 10. 4. [CSS] display(block,inline,inline-block,none )활용도 / grid / 관련 게임 시멘틱 태그 : HEADER, SECTION, ARTICLE, NAV, ASIDE, FOOTER display 속성 차이 (태그별) display 활용도 block : 크기 지정 가능 ( height, width) inline : 크기 지정 불가능(한 줄에 정렬) inline - block : 크기 지정 가능 ( 한 줄에 여러개 가능) none : 화면에 안보이게 해줌 ( f12 눌러서 속성 확인 가능) 하이퍼링크에 마우스 올리면 주소 나오게 하는 실습 display : grid 2차원 (행과 열)의 레이아웃 시스템 제공하는 속성 자세한 설명 나와있는 사이트 https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 .. 2022. 10. 4. [CSS]계층 선택자 / 반응 선택자 계층 선택자 - 자식 선택자 는 자손 선택자를 포함하고 있음 - 바로 밑에 있는 선택자만 자손/자식 선택자 - 그 외엔 자식선택자 자손 선택자 " "(띄어쓰기) 자식 선택자 > 형제(근접후행) 선택자 + 형제(후행) 선택자 ~ 사용 예제 li+li 는 첫번째 li 바로 뒤 li만 색깔 변경(두번째 li만) li~li 는 첫 번째 li 제외한 뒤에 오는 모든 li 색상 변경 크기 단위 px em : px*2 em : px*3 폰트의 기본 크기 : 16px 같은 선택자 내에 속성이 2개면 아래 속성이 적용됨 반응 선택자 : 사용자의 반응으로 생성되는 특정한 상태를 선택 ☆div☆ : 웹페이지에서 구역을 잡아줄 때 사용함 active(클릭하고 있을 때) - div클릭하고 있을 때 p태그 변경 - hover(마.. 2022. 10. 1. [css] 아이디 선택자 / 클래스 선택자 정의, 사용방법 아이디 선택자 / 클래스 선택자 아이디 선택자 : #기호로 표시됨/ 특정한 요소 선택 (HTML구조의 공간분할을 적용할 때) - body 태그 안에 한개만 존재 - 정의한 후 한 페이지에 한번만 사용 ( 웹 표준 테스트 오류발생) - 한 페이지에 한번만 들어가는 로고, 상단메뉴, 하단정보 등 스타일 정의할 때 클래스 선택자 : 마침표 기호로 표시되며 특정한 요소 선택 (공동되는 스타일 적용할 경우) - 여러 개의 태그에 동시에 적용 - 몇 번이고 재사용 가능 - 반복적으로 사용되는 스타일 - 세부 스타일 정의할 때 사용 css주석 방법 ctrl + / 아이디 선택자 사용 방법 1. body 에서 id이름과 class이름 지정 후 2. head 에 id일 땐 #아이디이름 클래스일 땐 .클래스이름 아이디 선.. 2022. 10. 1. [CSS] HTML에 CSS 작성 방법 / 구글 폰트 사용방법 CSS SELECT(선택자) h1{ color : red ; (스타일속성) (속성값) } html문서 내에 css 작성 ( head에 style태그 생성) 색상 추가 폰트, 글씨크기, 기울임체 굵은글씨/밑줄 -> 같은 태그면 동일하게 지정됨 구글폰트에서 폰트 가져오기 1. 사이트 들어가서 언어 -> korean으로 설정후 원하는 폰트 들어가기 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 아래에 내리다 보면 보이는 Regular 400 + 에서 + 클릭 3. 는 복붙해서 title위에 head안에만 붙여넣기 는 복붙해서 .. 2022. 10. 1. [HTML]입력양식태그 ID : PW : 취미 독서 운동 영화보기 성별 남 여 a b c 2022. 9. 30. [HTML] 테이블 태그 셀 병합 / 입력양식 태그 종류 / 사용법 테이블태그 셀병합 가로 병합 : colspan 세로 병합: rowspan table 생성 - border="1" 같이 삽입하여 테이블 모양 잡기 tr태그 넣기 tr태그 넣을 때, 병합된것을 생각하지않고 최대한 많이 넣기! 행별 이름 - tr 생성 후 이름삽입 병합된 셀은 가장 윗쪽에 있는 행에 넣어두기 td 삽입 th에 셀 병합할 colspan="합칠개수" 삽입 td에 셀 병합할 rowspan="합칠개수" 삽입 테이블 태그 셀병합 2 입력양식태그 action : 입력 데이터의 전달 위치 지정 method : 입력 데이터의 전달 방식 지정 (get/post) name 서버를 보내기 위한 속성 value : 각자의 분류로 다르게 입력 (개인) name : 같은 란이면 똑같은 분류로 작성 (그룹화) 입력창 -.. 2022. 9. 30. [HTML] 리스트 태그/디테일 태그/포함 태그/테이블 태그 사용법 리스트태그 : 목록들 넣기 : 번호 있음 : 번호 없이 모양 ( 모양에 따라 type= "square" / " round") 디테일 태그 : 숨길 내용 삽입 : details 안에 삽입 , 사이에 제목 넣기 포함태그 : 다른페이지 현제페이지로 삽입 유튜브 : 공유 -> 퍼가기 -> 복사 해서 그대로 붙여넣기 자동 재생 : 링크바로뒤에 ?autoplay = 1 음소거 : mute=1 자동재생 + 음소거 : ?autoplay=1&mute=1 테이블태그 행 개수 표현 : tr -> 가장 먼저 만들기 ( tr *개수) 셀을 넣을 때 제목이다 : th (th * 개수) 셀을 넣을 때 그냥 이름 : td caption : 테이블 제목 테이블 가운데로 옮겨서 정렬 : table 란에 align="center" 삽입 .. 2022. 9. 30. [HTML] 앵커태그/아이콘 삽입/ 아이콘,폰트 사이트 추천 1. 앵커태그 (내가 원하는 페이지로 이동가능) 하이퍼텍스트 만들때 사용 2. 내가 원하는 위치로 이동 아이콘 삽입 1. google fonts 사이트 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com google fonts - 아이콘 https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file wi.. 2022. 9. 28. [HTML] 자동 단축기, HTML 기본 태그 종류 자동 단축기 1. html 문서 html 작성하면 밑에 나오는 html:5 선택하기 -> 더 간단히 하는 방법 : ! + enter 2. html주석 하면 자동으로 생성 기본 실행 코드 기본 태그 종류 제목 : html 문서 본문 내 제목 표현 태그 (h1~h6) 2022. 9. 28. VisualStudio Code 설치방법 / HTML 기초문법 VisualStudio Code란? Visual Studio Code : 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스코드 편집기 HTML이란? (Hyper Text Markup Language) : 웹페이지에 정보를 담아 표시하기 위한 마크업 언어 여기서, Hyper Text 란? -> 현재 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 Markup이란? -> 어딘가에 표시를 해두는 것 설치방법 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and de.. 2022. 9. 28. 이전 1 다음 728x90 반응형
