분류 전체보기
-
02-2⠀CSS 박스모델 / 테두리 / 여백 / 레이아웃 / 위치지정web/HTML + CSS 2022. 2. 18. 12:54
웹 문서에서 내용을 배치할 때, 각 요소를 박스 형태로 구현하는 것을 말함 각 박스모델은 콘텐츠영역과 테두리, 여백 (padding / margin) 으로 구성됨 블록 레벨 요소 : 웹 문서에 삽입할 때 너비가 100% 인 요소 * 등 *양 옆으로 다른 요소가 올 수 없음 인라인 레벨 요소 : 웹 문서에 삽입할 때 콘텐츠만큼만 영역을 차지하는 요소 * 등 *인라인 레벨 요소의 콘텐츠 영역 외에 나머지 공간에 다른 요소 삽입 가능 * 콘텐츠 영역 (content / element) : 요소가 담고 있는 내용 * 패딩 (padding) : content 와 bord..
-
02-1⠀CSS 텍스트 / 목록 / 표 스타일 속성web/HTML + CSS 2022. 2. 17. 12:05
선택자 { font-family: "글꼴 이름1", 글꼴이름2, 글꼴이름3 } 웹 문서에서 사용할 글꼴을 지정 *글꼴이 없을 경우를 대비하여 두번째, 세번째 글꼴까지 지정 *띄어쓰기가 들어간 두 단어 이상의 글꼴 이름은 "" 큰 따옴표로 묶음 *한번 글꼴을 정의하게 되면 문서 안의 모든 자식요소에 같은 글꼴을 사용 선택자 { font-size:값 } 웹 문서에서 사용하는 글자의 크기를 지정 *키워드 사용시 xx-small < x-small < small < medium < large < x-large < xx-large *단위 사용시 (주로 사용) px / pt / ex em (=16px 12pt , 자기 자신 또는 부모요소에 상속받음) rem (상대적인 값으로 html 태그에게 상속받음 - 거의 뭐 조..
-
02⠀CSS (Cascading style sheets) 의 문법과 선택자web/HTML + CSS 2022. 2. 14. 15:59
CSS HTML 문서를 스타일링 하는 언어 *HTML 은 구조, CSS는 비주얼에 해당하고 이러한 구조와 비주얼은 분리되어야 함 *자바스크립트까지 포함한다면 크게 구조, 표현, 제어가 분리되어 사용되어야 함 스타일 문서 기본형 선택자 { 속성 : 속성값; 속성 : 속성값 } 주석 작성하기 /* 주석 내용 */ 웹 사이트 작성자가 알아보기 쉽도록 함 *css소스가 길면 주석이나 줄 바꿈, 공백 등을 제거하여 사용해야함 (=css소스 경량화) *'css minify' 또는 'css compress' 검색하여 경량화 툴을 찾아 사용할 수 있음 스타일 시트의 종류 브라우저 기본 스타일 브라우저에서 기본으로 사용하는 스타일 인라인 스타일 style 속성을 사용해 필요한 요소에 스타일을 직접 지정 내부 스타일시트 ..
-
01-2⠀입력 양식 태그web/HTML + CSS 2022. 2. 13. 16:01
~ 폼을 만드는 가장 기본적인 태그 *폼 요소 태그의 속성 form 내용을 처리할 서버 지정 보안이 중요하지 않은 데이터 전송 시 보안이 필요한 데이터 전송 시 폼의 이름을 지정 (기본값) action 에서 지정한 서버 결과를 현재 창에서 오픈 action 에서 지정한 서버 결과를 새 창에서 오픈 자동 완성 기능 (기본값은 on) 데이터의 유효성을 검사하지 않도록 지정 (주로 테스트 시에 사용) 그룹 이름 하나의 폼 안에서 구역을 나눌 때 사용하는 그룹 태그 ~ 폼 요소에 텍스트를 붙일 때 사용 *태그 안에 요소 넣기 아이디 *id 를 지정하여 for 에 연결시키기 이름^ 닫x 사용자가 입력한 정보를 받을 때 사용하는 데이터 양식 태그 태그의 type 속성 텍스트 입력이 가능한 필드 삽입 비밀번호 입력 ..
-
01-1⠀텍스트 / 목록 / 표 / 이미지 / 오디오와 비디오 / 하이퍼링크 태그web/HTML + CSS 2022. 2. 10. 21:48
웹 문서 안의 제목을 뜻함 * 이 가장 큰 제목, ... 순서대로 작아짐 ~ 텍스트 단락을 만듬 (vsc에서 줄을 바꾸더라도 브라우저엔 한줄로 표시) 닫x 텍스트 줄바꿈 할때 사용 (주소나 시조 등 줄의 구분이 중요할때 사용) *단락 스타일 적용 시 은 적용 안됨 닫x 문서 내용에서 주제 흐름이 바뀔 때 사용 (시각적 표현 x 의미적 관점으로 사용) *수평 가로선 표시는 css 사용하여 없앨 수 있음 ~ 인용문 표시 (약간 들여쓰기 됨) ~ 중요한 내용을 강조할 때 사용 (의미적 관점) ~ 단순히 글자만 굵게 표시할때 사용 (시각적 관점) ~ 글자 기울게 (흐름 상 특정 부분을 특별히 강조할 때) ~ 글자 기울게 (마음속의 생각이나 용어, 관용구 쓸 때 사용) ~ 줄임말 (title 속성을 함께 사용) ..
-
01⠀HTML 의 개념과 구조web/HTML + CSS 2022. 2. 10. 19:21
HTML (Hypertext Markup Language) 웹 문서를 만드는 기본 언어 (웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시) HTML 문서의 기본 구조 웹 문서의 유형을 지정 ~ HTML 파일의 시작과 끝 * 문서에서 사용할 언어 지정 (ko=한국어) 웹 브라우저에 문서 정보를 알려주는 태그 (화면에는 보이지 않음) *,, 등의 시맨틱 태그 ( 에는 css 나 js 를 넣음) 닫x 웹 문서와 관련된 정보를 지정함 (문자 세트 인코딩 지정, 제작자 등) * 웹 문서를 인코딩할 문자세트 지정 (utf-8 문자세트 사용 시 화면에 한국어로 인코딩하여 표시) * 웹 문서의 키워드 지정 * 웹 문서의 설명 * 웹 문서의 소유자나 제작자 ~ 웹 문서의 제목 (웹 브라우저의 제목..
-
웹 용어 정리 ( 계속 추가 )cs 2022. 2. 10. 15:46
정적 사이트 방문자에게 정보만을 보여주는 웹 사이트 동적 사이트 서비스와 기능까지 포함하는 웹 사이트 클라이언트 사용자가 사용하는 서비스 (http,dns 등) 혹은 사용자의 장치 (pc,스마트폰 등 네트워크 접속이 가능한 장치) 서버 서비스를 제공하는 컴퓨터 * 웹 사이트에서 웹 서버 (iis, apche) 가 서버 역할을 하고 , 웹 브라우저 (파이어폭스, 크롬, 익스플로어) 가 클라이언트 프로그램이 된다. 난 왜 이게 이해가 안됐지 ;; 빡대가린가 하고 20분동안 검색 죤내 쳐햇네 ;; 호스팅 서버를 임대해주는 서비스 트래픽 서버에서 웹 사이트의 이미지, 동영상 등 데이터를 불러오는데에 사용되는 데이터 전송량 HTTP 하이퍼텍스트 전송 프로토콜 (서버에 데이터를 전송해주는 가장 기본적인 프로토콜, ..