728x90 반응형 분류 전체보기86 [CSS] 박스모델 박스모델박스 모델 구조 margin과 padding의 차이margin : border 바깥쪽의 여백을 정의padding : border 안쪽의 여백을 정의속성은 네가지(right, top, bottom, left)padding값을 수정하면 전체 공간의 크기가 달라짐을 유의 (공간이 여백을 포함한 크기로 변경)top right bottom left 순서(시계방향)로 한 줄에 작성 가능padding의 상하 값은 10px, 좌우는 0을 넣고 싶다면, padding: 10px 0;처럼 쓸 수도 있음 padding 주기 전padding 적용 후margin 적용 후보통 padding으로 텍스트 들여쓰기함 margin: auto;로 좌우 중앙정렬도 가능 Block 요소와 Inline 요소Block 요소의 특징 태그가.. 2024. 1. 19. [CSS] 주요 속성 캐스케이딩css의 우선순위를 결정하는 세가지 요소1) 순서 : 나중에 적용한 속성값의 우선순위가 높음 → blue적용2) 디테일 : 더 구체적으로 작성된 선택자의 우선순위가 높음 → red 적용3) 선택자 : style > id > class > type 순으로 우선순위가 높음 → pink 적용 CSS 주요 속성 width속성 : 선택한 요소의 넓이를 설정 - 고정값(px), 가변값(%) - 부모의 크기에 영향을 받음heigt속성 : 선택한 요소의 높이를 설정font-size : 글자크기 → body는 기본 16pxfont-family : 서체 선택, 브라우저마다 지원하는 폰트가 다름(폰트 대체를 위해 ,로 여러개의 폰트를 기입함, 마지막에 sans-serif를 디폴트로 입력 - 모든 브라우저에서 지원하.. 2024. 1. 17. [CSS] 부모 자식 관계 자손선택자 예시 첫번째 단락 두번째 단락 자식선택자 예시 첫번째 단락 두번째 단락 상대 크기해상도에 따라 px의 절대적 크기는 달라지므로 상대적 크기를 사용하는 것이 좋음 부모 요소 기준% : 비율em : 배수rem : 최상단 부모기준 배수 이 텍스트는 부모 글꼴의 1.5배크기의 글꼴입니다. 이 텍스트는 부모 글꼴의 150%크기의 글꼴입니다. 둘 다 30px 2024. 1. 16. [CSS] 선택자 태그 선택자 적용 클래스 선택자 1 클래스 선택자 2 id 선택자 ⇒ id 선택자가 가장 우선순위 높음 → 클래스 → 태그 모듈식 CSS 방식 사용 - 중첩적용각 class마다 별도의 디자인이 정의되어있을 때, 공백으로 추가하여 스타일을 조합할 수 있음 font style과 font size 중첩적용1 font style과 font size 중첩적용2 2024. 1. 15. [CSS] 적용 방법 CSS(Cascading Style Sheet)CSS 구성 요소선택자 : 디자인을 적용할 HTML 영역 → h1, p 등..속성 : 어떤 디자인을 적용할지 정의속성값 : 어떤 역할을 수행할지 구체적으로 명령, 세미콜론(;)필수 입력 CSS 적용방법 세가지1) Inline Style Sheet (인라인 스타일링)태그 안에 직접 원하는 스타일을 적용 1. 배경색 변경 2. 글자색 변경 3. 글자크기 변경 4. 복합 스타일링 2) Internal Style Sheet (내부 스타일링)태그 안에 넣기 3) External Style Sheet (외부 스타일링)태그로 .css파일 불러오기→ html, css 각각의 문서 안에서 따로 관리하여 상대적으로 가독성이 높고 유지보수가 쉬움 ⇒ 인라인 스타일링이 가장 우선.. 2024. 1. 12. [HTML] 자바스크립트 적용 javascript 예시 js 로드 순서1 js 로드 순서2 head의 스크립트가 우선 실행되고 body를 불러오기 때문에 oad1의 내용은 변경되지 않는다.→ load2의 내용을 불러온 후 스크립트가 실행되기 때문에 load2의 내용은 변경된다. onclick클릭 시 실행 변경될 p태그 내용 내용 변경 버튼 클릭 전 버튼 클릭 후 외부 스크립트// ./js/my_js.js function updateDemo2() { document.getElementById("demo2").innerHTML="외부 스크립트 실행됨" }외부 js파일 작성 후 불러오기 demo2 내용 내용 변경 버튼 클릭 전버튼 클릭 후 .. 2024. 1. 9. [HTML] 구조 태그 구조를 잡을 때 사용하는 태그 태그 : 웹사이트의 머리글을 담는 공간 태그 : 메뉴버튼을 담는 공간 → ,,와 함께 사용 태그 : 웹사이트의 주요 내용을 담는 태그 → role=”main” 속성 필수 입력 태그 : 웹사이트의 주요 이미지나 텍스트 등의 정보를 담는 태그 → 태그 내에 반드시태그가 존재해야 함. 태그 : 웹사이트 하단에 들어가는 정보를 표기할 때 사용 태그 : 임의의 공간을 만들 때 사용 → 여러 태그를 하나로 묶어 공통된 스타일 적용 가능 HTML 태그의 두 가지 성격 Block요소 y축 정렬 형태로 출력(줄바꿈 현상 나타남) ,,, 등 이 있으며 width,height로 공간을 만들 수 있고, 상하배치작업 가능 Inline요소 x축 정렬 형태로 출력(한 줄에 출력) 가 대표적인 예, 공.. 2024. 1. 8. [HTML] form 태그 회원가입 form 예제 이름 email password 성별 선택 남성 여성 관심분야 선택 스포츠 음악 독서 생년월일 나이 유저선택 관리자 일반유저 방문자 좋아하는 색상 증명사진 업로드 자기소개 2024. 1. 5. 이전 1 2 3 4 5 ··· 11 다음 728x90 반응형