WEB/CSS311 03-02. 위치 속성 1. 위치 지정 ①position 속성: 요소의 위치 지정 형식을 설정할때 사용한다. ②절대 위치 좌표에는 absolute, fixed 가 있고 상대 위치 좌표에는relative, static 이 있다. absolute - 절대위치 좌표 설정 fixed - 화면을 기준으로 절대위치 좌표설정 relative - 초기 위치에서 상하좌우로 위치 이동 static - 위쪽에서 아래쪽으로 순서대로 배치 (실행 결과는 웹브라우저의 버전 차이에 따라 상자 3개가 모두 보이거나 1개만 보인다고 한다.) ③웹 브라우저에서 출력방식을 통일 하려면 left 속성과 top 속성을 적용하면 된다. ④도형 순서를 변경하려면 z-index 속성을 사용하면 된다. z-index: 숫자 형태이며 숫자가 클수록 앞으로 나온다.(숫자를 .. 2022. 12. 18. 03-01. 글꼴 1. 글자크기 ①font-size: 속성으로 글자 크기를 조절할수 있다. ②html에서 h1태그의 기본크기는 32px이며, p태그의 기본 크기는 16px 이다. loui3 html css3 script html css3 script html css3 script html css3 script html 2. 글꼴 ① font-family: 속성으로 글자 글꼴을 바꿀 수 있다. ② 글꼴 변경시 한단어는 따옴표를 사용 안해도 되지만, 두 단어 이상일 경우 따옴표 사용을 하는게 좋다. ③ 모서리가 뾰족한 글자를 Serif 글꼴, 모서리가 네모진 글자를 Sans-serif 글꼴이라고 한다. ④ 웹페이지를 사용하는 사용자가 글꼴이 없을 수도 있으므로 여러개를 지정하여 쓸수 있다. html css3 script ht.. 2022. 12. 16. 02-01. CSS 속성들과 배경 1. 박스속성 ①border - 테두리 ②marign - 테두리와 다른 태그 사이의 바깥쪽 여백 ③padding - 테두리와 글자 사이의 안쪽 여백 ④width - 글자영역의 가로 크기 ⑤height - 글자영역의 세로크기 2. 박스속성 적용하기 ① width,height ② border, margin, padding 3. 박스테두리 적용하기 ① border-style: 속성들 dashed : 테두리를 약간 긴 점선으로 한다. dotted: 테두리를 점선으로 한다. solid: 테두리를 실선으로 한다. none: 테두리를 없앤다. hidden: 테두리가 있긴한데 보이진 않는다. loui3 html css script 4. 가시 속성 ① 가시속성은 태그가 화면에 보이는 방식을 지정한다. -대표적으로 css.. 2022. 12. 15. 01-02. 다양한 선택자들 1.자손 선택자 와 후손 선택자(그림) 2. 후손 선택자 ①후손 선택자는 선택자A의 후손인 B를 선택 하는것으로 (선택자 A 선택자 B)로 나타낸다. css3 html css script css3 loui3 html css script 3.자손선택자 ①자손 선택자는 선택자A의 자손인 선택자 B를 선택 하는것이고 선택자 (A >선택자B) 로 나타낸다 css3 html css script css3 loui3 html css script ②자손선택자와 table table 태그 내부에 있는 태그를 자손선택자로 선택을 할경우 아래와 같이 하면 파란색 색깔이 th태그에 적용이 안된다. 그 이유는 웹브라우저에서 tbody 태그를 자동으로 추가 해 table > tr > th 가 아닌 table > tbody > t.. 2022. 12. 14. 01-01. CSS 선택자 1. 선택자 용도 ①선택자는 CSS3에서 특정 html 태그를 선택할때 사용하는것이다. 1. 선택자를 사용하면 선택한 태그에 원하는 스타일과 스크립트를 적용 할수 있다. 2. 아래와 같이 css블록(선택자, 스타일 속성, 스타일 값)을 사용해 작성한것을 스타일 시트라고 한다. 2. 추가로 알면 좋은 속성들 ① marign, padding (margin속성은 바깥쪽 여백을 padding은 안쪽 여백을 지정한다.) 예시 margin:10px 는 위, 아래 , 오른쪽, 왼쪽 10px margin 10px 20px 위,아래 10px 오른쪽,왼쪽 20px margin 10px 20px 30px 위 10px 오른쪽,왼쪽20px 아래30px margin 10px 20px 30px 40px 위10px 오른쪽 20px .. 2022. 12. 12. 이전 1 2 다음
