dailyoon

>상대크기 em, rem 1. em 단위는 상위 요소 크기의 몇 배인지로 크기를 설정 ex) 2em 상위요소 글자크기 : 16px 현재요소 글자크기 : 32px 2. rem 단위는 문서의 최상위 요소, 즉 html 태그 크기의 몇 배인지로 크기를 설정 ex) 2rem 요소 글자크기: 16px(기준) 상위 요소 글자크기: 32px 현재 요소 글자크기: 32px >CSS 2D transform - 이차원 좌표에서 요소를 변형시키는 속성 - 이동(translate), 확대(scale), 축소(scale), 회전(rotate), 경사(screw) 등을 만들 수 있음 * transform 과 position의 차이 -transform 은 눈에 보이는것을 이동한다. 그러나 실제 위치가 변하지는 않는다. but, p..

>다단 레이아웃 - 텍스트 단을 column 속성으로 다단으로 생성 - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count :단의 개수를 설정 column-rule :단과 단 사이의 구분선, 구분의 모양, 두께 색상을 설정 column-gap :단과 단 사이의 여백을 설정 column-span :안의 포함된 요소에서 주면 해당 요소는 다단편집에서 해제 >플렉서블 레이아웃(flex) - 대부분의 웹사이트는 수직 구성 - 레이아웃을 구성할 때 가장 많이 사용되는 요소들이 대부분 블록개념으로 표기 - 수직 구성은 쉽게 구성할 수 있으나, 수평 구성은 구현하기 쉽지 않음 - 과거에는 수평구성을 , float속성, inline-block 형태로 구성했다. - 좀 더 쉽게 수평구성을 ..

>CSS display - 웹 페이지의 레이아웃을 결정하는 속성 1. block : display 속성이 블록인 요소는 새로운 라인에서 시작하고 해당 라인의 모든 너비를 차지, width, height 적용 2. inline : display 속성이 인라인인 요소는 같은 라인에서 시작하고 line-height가 적용 3. inline-block : block 성질과 inline 성질을 둘 다 적용 : width, height, margin, padding, line-height 모두 적용 : 요소를 가로로 나열 4. none : 웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라짐. : 둘다 수행하면 보이지 않는것은 동일 -visibility: 해당하는 요소의 영역이 보이지 않을 뿐 빈공간으로 유..

>CSS의 배경 1. background-color HTML 요소의 배경색을 설정 2. background-image HTML 요소의 배경으로 나타날 배경 이미지로 설정 배경 이미지는 기본 설정으로 반복(바둑판 형식)되어 나타남 background-image : url('배경이미지 경로'); 3. background-repeat 배경 이미지를 수평이나 수직 방향으로 반복하도록 설정 repeat, repeat-x, repeat-y, no-repeat 4. background-position 반복되지 않는 배경 이미지의 상대 위치를 설정 %나 px을 사용해서 상대위치를 직접 설정할 수 있음 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단 left top center top right top left ce..

10. 속성 선택자 HTML요소의 여러 속성들(src, href,type,class,...)을 이용해서 선택자로 사용하고 스타일을 적용 [속성명]{ 스타일 적용 } [속성명 = 값]{ 스타일 적용 } [속성명 ~= 값] : 속성값이 완벽히 일치하는 문자를 가지는 요소를 선택 ex) css / css funny / funny css (공백으로 나눠져 있어야 인식한다) [속성명 *= 값] : 속성값이 포함된 모든 문자를 가지는 요소를 선택 *공백 또는 하이픈으로 나뉘든 어떤 경우든 속성값이 포함되면 선택된다. ex) css/css funny /funny css / css-funny / css_funny / cssfunny ..... [속성명 |= 값] : 속성값이 접두사로 시작되는 문자중에서 완벽하게 일치하..

>CSS(Cascading Style Sheets) -HTML 문서를 시각적으로 꾸며주는 역할을 하는 언어 >CSS 의 기본 문법 - HTML 문서 태그 안에 에 CSS문법을 작성 선택자 { 속성명: 속성값; 속성명: 속성값; } * { } 영역을 선언부 라고 한다. - HTML 문서의 각 태그 안에 style 속성 안에 CSS문법을 작성 style= "속성명: 속성값;, 속성명: 속성값;..." >CSS의 주석 /* 사이에 주석내용을 입력 */ >>CSS를 적용하는 방법 1. 인라인 스타일 HTML 요소 내부에 style 속성을 사용하여 적용하는 방법 그 style 속성이 적혀있는 요소에만 스타일을 적용 2. 내부 스타일 HTML 문서에 요소 안에 태그를 사용하여 적용하는 방법 해당 문서에만 스타일을 ..

>폼(form) - 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 :사용자가 입력한 데이터를 서버로 전송할 때 form 요소를 사용 여러 입력들(input, textarea, select) ..... >>method post : body에 데이터를 저장하여 전송하는 방식 get : URL에 데이터를 저장하여 전송하는 방식 >>입력상자(input) form 내부에서 데이터를 입력받기 위해 설정해주는 요소 [ type 속성 ] text : 문자열을 입력받는 글상자 password: 비밀번호를 입력받는 글상자 radio: 여러개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있도록 하는 버튼, 그룹을 맺기 위해서 name 속성의 값이 동일해야한다. checkbox: 여러개의 옵션 중에서 다수의 옵션..

>하이퍼링크 -하이퍼링크란? : 다른 페이지나 사이트로 연결, 이동하는 링크(텍스트,이미지) 링크에 사용될 텍스트 또는 이미지 >테이블 - 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표 : 행과 열로 이루어져 있다. 셀 병합 colspan 셀을 가로로 합침 rowspan 셀을 세로로 합침 >>캡션(Caption) 태그를 사용하면 테이블의 상단에 제목이나 짧은 설명을 붙일 수 있다. 하나당 태그는 하나만 사용 가능하다. >책갈피 - 태그의 name 속성 또는 특정 태그의 id 속성을 이용하여 책갈피 기능을 할용 (마치 위키백과에서 원하는 문단으로 이동할때 하는것이랑 비슷..) 텍스트 또는 이미지 ..... 도착지 >아이프레임 : inline frame 의 약자 : iframe을 이용하면 웹페이지 안..

>문단 태그 - 내용상 끊어서 구분할 수 있는 부분 즉 문단을 만드는 태그/블록태그 내용 >제목 태그 -제목을 표현할 수 있는 태그 --> 가장 큰 태그부터 가장 작은 태그까지 제공 검색 엔진에서 키워드로 사용/블록태그 제목 >웹 접근성 - 정상적인 웹 컨텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 이용자들을 포함해 모든 사용자들이 동등하게 사이트에 접근할 수 있도록 웹 컨텐츠를 제작하는 기법 >웹 표준 -여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 하는 기술, 방법등을 의미/ 크로스 브라우징(호환성) >서식 태그 텍스트 텍스트를 굵게 표현하고 싶을때 사용 태그와 동일한 기능 *strong은 스크린리더가 시각장애인 위해서 구별되게 읽어준다 텍스트를..

보통 인터넷이랑 웹은 혼용되기도 하는데 미세한 차이가 있다. 인터넷은 컴퓨터가 서로 연결되어 통신을 주고받는 컴퓨터끼리의 네트워크를 일컫는 말이고, 웹은 그 인터넷상에 정보가 얽혀있는 무형의 정보 네트워크를 말한다. >인터넷 -전 세계에 걸쳐 원거리 접속이나 파일 전송, 전자 메일 등 데이터 통신 서비스를 받을 수 있는 컴퓨터 네트워크 시스템 >웹 브라우저(Web brower) -사용자의 요청에 맞는 주소로 찾아가서 인터넷의 컨텐츠 (문서, 그림, 멀티미디어 파일 등)를 검색 및 열람 후 사용자에게 응답하기 위한 응용 프로그램의 총칭이다.(=웹을 이용하기 위한 창구) :텍스트를 UI로 구현해준다. >클라이언트와 서버 요청(URL) 클라이언트[브라우저 이용] ----> 서버 (정보를 제공받는 사용자 또는 ..