CSS_web1

Cascading Style Sheet상위요소는 건드릴수 없다. HTML에 Style(디자인)을 준다. \*\*스타일정보는 웹문서가 브라우저에 렌더링 되기 전에 읽어져야 하기 때문에 모든 스타일 정보는 head 영역에 정의되어야 한다. (body전에 정의. 하지만 he

ul이던 li던 상관 없이 적용 가능list-style-type : ul, ol의 모양 disc, circle, square, none...list-style-image : ul, ol 모양 대신 이미지로 대체 url(경로); 경로에 한글이나 특수기호가 들어

색관련 css 기본 : 박스 - 투명(흰색이 아님), 글자 - 검정 background-color : 배경색 color : 글자, 테두리 색 (배경색 제외한 다른 색) border-color : 테두리색 색 값 ★1. 16진수 : #으로 시작 0~f 까지의 값으로 표

단위 : auto(기본), px : 어떤 단위를 쓰든 컴퓨터는 px로 변환되서 적용된다. % : 자주 사용, 부모대비 vh, vw : 뷰포트(화면크기) 대비 크기 (세로, 가로) (%처럼 쓰면 됨) 레이아웃을 잡기 굉장히 까다롭기 때문에 주로 사용하지 않음. ★v

예민하게 다뤄야함. 레이아웃이 어그러지기 쉽기 때문.단위 : px, % %사용 가능하지만 부모요소 기준이기 때문에 얼마나 들어갈지 정확히 알 수 없음. 그래서 가급적 px권장 ★여백값 상속 안됨margin : 해당요소의 바깥쪽 여백크롬 개발자도구에서 살구색 영역bod

:계산기 px, %가 들어가는 모든 속성에서 사용 가능 사칙연산 앞, 뒤에 무조건 빈칸 (-가 빈칸을 두지 않으면 인식이 안됨) calc(사용할 공간 크기 / 한 줄에 놓고 싶은 칸 수) calc((사용할 공간 크기 - 여백or테두리)/ 한 줄에 놓고 싶은 칸 수))

border : 테두리에 관련된 속성 ★border : width style color \-> 한방 코드. 순서대로 입력하기(안해도 되긴하나 순서대로가 권장) ★1. border-width : 테두리 두께 (두께와 선은 세트) ★2. border-style : 선 종

배경 : background★1. background-color : 배경색2\. background-image : 배경이미지★img 태그와의 차이점 : 해당요소 영역만큼만 이미지가 그려진다. 요소보다 원본 이미지 크기가 작으면 반복해서 그린다. 배경이미지는

color : 글자색★★text-align : inline 요소 가운데 정렬 (margin: 0 auto와 같음)★★부모에 적용한다. (본인한테 적용 X)\--> 요소 안에서 내용물을 가운데정렬한다고 생각. \--> inline은 요소가 내용물과 width가 같으니까

overflow-x, overflow-y가 합쳐진게 overflowvisible : 기본값★★hidden : 넘치는 부분 다 숨김 (overflow를 쓰는 이유)scroll : 넘치던 말던 스크롤바 달아줌넣으려는 축기준으로 해서 overflow-y: scroll 로 쓰

left, right, none (center는 없다.)박스 위치 이동시키기.float은 하늘에 둥둥 떠있는 상태라고 보면 된다. 그래서 float두고 다음거는 float을 두지 않으면, 다음거는 땅에 있는 상태고 float은 떠있으니 땅에 있는 것이 안보이게 된다.

position : 요소의 위치를 잡아주는 속성겹치려고 사용나중에 써놓은 요소가 위에 나온다. 구조 설계시 가장 중요특이점: 상속 안 됨float보다 위에 떠있음. 속성static : 기본값. (땅에 붙어있음)★relative : 위치를 지정별도의 하위 속성과 함께 쓰

마우스오버 : hover해당 요소에 마우스가 올라가면 hover(부모 자손 관계 확실히 지켜야함)\-> pink에 마우스를 올리면 자손중에 (> 이 표시 뜻이 자식이라는 뜻임) 클래스가 blue인 교소를 선택해서 보이게 해라. 라는 뜻.

구조 : 일반적인 페이지는 대체로 3단, 4단으로 짠다. 각 페이지마다 어떤 데이터를 넣을 건지 생각하고 구조를 짜야 한다. ★헤더 : 제일 먼저 보여줘야 하는 정보들 나열 (로고, 서치바, 로그인)메뉴바 : 헤더 안에 포함되도 된다. ★본문 : 실제 필요한 정보들(컨

display요소의 레벨을 바꿔주거나 화면에서 사라지게 할 수 있는 속성특이점 : 상속 안됨inlineinline특성상 위 빨간 화살표만큼의 공간도 빈칸으로 적용이 돼서 위와같이 박스들이 띄워지게 된다. 이때는 그 요소들의 부모에 font-size: 0; 을 넣어서 빈

흐름li를 누르면 label을 이용해 이미지위에 있는 radio가 checked되게 함. radio가 checked되면 바로 밑에 있는 img태그가 보이게 하기HTMLCSS흐름li를 누르면 label을 이용해 위에 있는 radio가 checked되게 함. radio가

카테고리상 block 레벨flex는 부모, 자식관계 두개만 신경쓴다. (자손은 신경쓰지 않으며, 적용도 안됨)(무조건 부모 자식관계로만 만들어야 한다. )부모: container자식 : item(주의할 점) flex를 쓰게 되면 사이즈를 내 마음대로 할 수 없는 경우들

css만 건들일거면 class로 하는 것이 좋다. javaScript사용할 때 id를 쓰기 때문에 id를 다 쓰게 되면 script할 때 id를 사용못 할 수도 있음 body는 기본 margin이 8씩 붙기 때문에 body { margin: 0; } 해놓기 float