일오사 154

CSS 다섯 번째 박스 모델 Start!!! 이미지는 내가 만든 강의자료가 아니라서 눈으로만!! 박스 모델 개념 HTML의 모든 요소는 상자(Box) 형태를 가진다. content : 실제 내용을 담고 있는 부분 (이미지, 텍스트 등) Border : content를 감싸고 있는 테두리 Padding : content와 Border 사이의 여백 Margin : Border 밖의 여백 Content와 Border content 영역의 크기가 지정되어있는 상태에서 content의 양을 늘리면 내용이 content box를 벗어나게 됨 → overflow를 이용하면 scrol, hidden 등으로 설정 가능 Border의 프로퍼티 border-style : 테두리 선 설정 border-width : 테두리 두..

STUDY/__Web development 2021. 7. 13. 00:49

CSS 네 번째 텍스트와 관련된 프로퍼티 Start!! 이미지는 내가 만든 강의자료가 아니라서 눈으로만!! 폰트와 관련된 프로퍼티 font-size : 폰트 크기 font-family : 폰트 종류, 폰트에 띄어쓰기가 있는 경우 따옴표를 이용하여 폰트 설정 → 여러개를 동시에 지정, 모든 이용자의 기기에 동일한 폰트가 없을 수도 있기 때문, 첫 번째가 없으면 두 번째를 적용하는 방식, 항상 마지막에는 일반 글꼴을 두어 문제 없도록 함. 컴퓨터에 있는 폰트 뿐만 아니라 경로를 활용하거나 링크 태그로 웹 폰트(google font)를 적용할 수 있음 font-style : Italic, normal(기본), oblique(기울임) font-weight : 폰트 굵기 (normal은 400, Bold는 700..

STUDY/__Web development 2021. 7. 13. 00:44

CSS 세 번째 값과 단위 Start!! 이미지는 내가 만든 강의자료가 아니라서 눈으로만!! 숫자 값 : 글자 사이즈, 높이 너비를 정하는 등에 사용 숫자 값으로 조정 단위가 굉장히 중요 (px, em, rem 등) px : pixel, 디스플레이를 구성하는 최소 단위, 화소 1개의 크기(1/96in, 절대 크기로 사용) em : 현재 스타일이 지정된 요소의 font-size 기준 (상대적인 길이) rem : 최상위 요소의 font-size 기준 (상대적인 길이) px을 쓰지 않고 상대적인 길이를 사용하는 이유? pc 뿐만 아니라 모바일기기나 태블릿 같이 브라우저 환경이 바뀌었을 때 또는 확대와 축소를 했을 때 유용함. em은 css에서 상속이라는 문제 때문에 rem 사용을 권장 예제 코드 단위 px e..

STUDY/__Web development 2021. 7. 10. 22:41

CSS 두 번째 선택자와 기초 Start!! 강의자료는 내가 만든 게 아니라서 눈으로만!! 선택자(selector) : 스타일을 적용하고자 하는 HTML 요소를 선택하는 역할 여러개의 선택자를 ,를 이용하여 스타일을 한 번에 지정하는 것이 가능 단순 선택자 1. 타입(Type) 해당 태그를 가지는 모든 요소에 스타일을 적용 예제 코드 로사입니다 첫 번째 단락입니다 작은 로사입니다 두 번째 단락입니다 작작은 로사입니다 2. 클래스 (Class) 선택자 클래스 이름으로 스타일을 적용, 같은 클래스 이름이면 모두 적용 클래스(Class) : 비슷한 특징을 갖는 요소를 지정하여 묶을 수 있음, 여러 번 사용이 가능 사용 : .main{ color : red; } 예제 코드 작은 로사입니다 두 번째 단락입니다 작..

STUDY/__Web development 2021. 7. 10. 22:32

CSS는 천천히 조금씩 올려야징 CSS 기초 문법 Start! 이미지는 내가 만든 강의자료가 아니라서 눈으로만!! p : 선택자(selector), 스타일을 적용하고자 하는 HTML 요소를 선택하는 역할 선택자 뒤에 { } 중괄호 안에 있는 한 블록을 선언 블록 이라고 부름 중괄호로 다음 선언 블록과 구분되며 각각 적혀있는 선택자에 한해서만 스타일이 적용 → '이 문단에는'에 해당 color, font-size : 속성(Property), 지정할 스타일의 속성명에 해당, ';'을 이용하여 구분 '속성: 값;' 이 한 단위 → '크기는', '색은'에 해당 18px, blue : 값(value), 키워드나 특정 단위를 이용하여 원하는 스타일을 적용, 속성과 쌍을 이룸 → '18px', '파랑'에 해당 속성은..

STUDY/__Web development 2021. 7. 10. 22:15

요즘 멋쟁이 사자처럼 동아리 활동을 하며 조금씩 공부 중인 HTML 기초에 대해 정리를 해보려고 한다! html에는 여러가지 태그가 있는데 그 종류들에 대해 공부를 해보자 이미지는 제가 만든 강의자료가 아니라서 눈으로만 보시길! 레이아웃과 관련된 기본 태그 시맨틱 태그(Semantic tag) : 의미를 가지고 있는 태그 성별 학년 이름 남 3 수노 여 3 곽두팔 rowspan="숫자" : "숫자"만큼 셀이 행을 점유 colspan="숫자" : "숫자"만큼 셀이 열을 점유 예시) 3 2. 목록 ul(순서 없는 목록), ol(순서 있는 목록) : 리스트의 항목을 감싸는 태그 li : 리스트에 나열할 항목을 감싸는 태그 ※ 목록 중첩 가능! 예제 코드 장보기 목록 샴푸 머리빗 물 To-Do 리스트 잠 자기 ..

STUDY/__Web development 2021. 7. 10. 20:08