728x90 반응형 SMALL CSS9 Flexbox 📍Flexbox란뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때 효율적으로 요소를 배치,정렬,분산할 수 있는 법을 제공하는 레이아웃 방식 반응형 디자인을 구현하는데 강력한 도구 📍구성 flex container : flex item을 감싸고 있는 부모 요소 ( 전체에 관여) flex item : flex container 안에 있는 여러개의 자식 요소 (각각에 관여) 📍Flexbox 만들기정렬하려는 요소(flex item)의 부모 요소(flex container)에 display:flex속성을 지정하면 됨먼저 지정해줘야 다음 속성 적용 가능// 일반적으로 display: flex를 지정한다.flex-container {display: flex;} flex container: dis.. 2023. 10. 11. canvas 1) canvas width,height으로 속성 지정 inline-block 형태임 캔버스 태그 안에서 내용 그리려면 자식 노드를 추가 하는 것이 아니라 객체를 가져와서 함수 호출하여야 함 canvas api 사용하려면 캔버스 생성 + 렌더링 콘텍스트를 만들어야함 : 1-1) 사용법 ) 이후 js에서 다루기 const canvas = document.querySelector('canvas'); const ctx = canvas.getContext("2d") //ctx ->context 라는 의 1-2) 좌표 왼쪽 위 구석이 (0,0) 오른쪽으로 갈수록 x값 커짐 아래쪽으로 갈수록 y값 커짐 1-3) 각도 기준 : 가로축의 오른쪽 라디안 값 계산 radians = (Math.PI/180)*degree e.. 2023. 8. 3. 고급 선택자(연결선택자, 속성선택자,가상선택자 ) id 선택html에서 ..id는 html에서 유일해야됨class 선택html에서...class를 html내에서 다른 요소에 적용 해도 됨(1)연결 선택자1-1) 하위 요소에 스타일 적용하위요소 : 특정 요소 기준 그 안에 포함된 요소 자식요소 : 현재 요소 기준 바로 한 단계 아래 요소손자요소 : 자식 요소의 한단계 아래 아래 료소하위 선택자 (자손 선택자 ) : 부모 요소에 포함된 하위 요소를 모두 선택상위 요소 하위요소section p { } //section 요소의 모든 하위 p에 적용 할 스타일자식 선택자 : 하위 선택자와 다르게 자식 요소에만 스타일 적용부모요소 > 자식 요소 section> p { } //html text //자식요소 text11 //하위 요소1-2) 형제 요소에 스타.. 2023. 8. 2. 배경 (1) 배경색과 배경 범위 지정 1-1) background-color background-color: #00000; background-color : rgb(0,0,0); background-color:green; background-color:inherit; //전역값 background-color : currentcolor; // 특정 키워드 값 지정 1-2) background-clip : 배경색의 적용 범위 조절 border-box : 박스 모델의 가장 외곽(테두리) 까지 (기본값) (테두리 영역과 그 안쪽 영역을 채움 ) padding -box : 박스 모델에서 테두리를 뺀 패딩 범위 까지 적용 content-box: 내용(콘텐츠) 부분에만 적용 (2) 배경 이미지 지정 2-1) backgro.. 2023. 8. 2. 박스모델/레이아웃 (1) css와 박스 모델 1) 박스 모델 요소 contents(콘텐츠) - width,height으로 설정 padding - html 요소의 안쪽 여백 지정 border - 요소의 테두리 설정 margin - html 요소의 바깥 여백 지정 2) 블록 레벨 요소 / 인라인 레벨 요소 블록 요소 : 요소 삽입시 혼자 한 줄 차지(=요소의 너비가 100%) - 가로 영역을 모두 채우며, bolck요소 다음에 등장하는 태그는 줄바꿈이 된 것 처럼 보임 - width, height 속성 지정 가능 박스 형태 ex) h1 , div, p 인라인 요소 : 한 줄에 인라인 요소 여러 개 나열 가능 - 콘텐츠 만큼 영역을 차지 - widht, height 지정 불가 ex) span,img,strong inline-b.. 2023. 8. 2. 스타일 시트 종류/cascading 1. 인라인 스타일 시트 : 간단한 스타일 정보 태그 안에 정의 Style 속성: sytle = "속성:속성값;" -> (스타일 시트를 사용하지 않고 태그 안에 스타일 적용할 대상에 직접 표시 단일 요소에 고유하 스타일 적용 해당 요소에 style 속성 추가 Ex) This is a heading This is a paragraph. 내부 스타일 시트: 스타일을 여러 곳에 안에 정의 ,안에 작성 Html 페이지에 고유한 스타일이 있는 경우 head 섹션 내 2. 외부 스타일 시트(css) : 따로 저장해 놓은 스타일 정보 Html 코드에 링크 연결하여 사용 파일 하나만 변경하여 전체 웹 사이트의 모양 변경 html 내의 요소 내부에 외부 스타일 시트에 대한 참조 포함 ex) Rel = relation h.. 2023. 8. 2. 이전 1 2 다음 728x90 반응형 LIST
