요번 주에는 주로 html+css활용한 홈페이지 제작만 할 것 같아서 ~
홈페이지 제작에 필요한 그동안 배웠던 지식들을 점검하는 시간을 가지도록 할 것이다.
※그동안 배운 지식 점검.
#css적용하기 전 a태그나 ul태그 쓸 때는 맨 위에 공통적으로 들어가는 css방식이 있는데.
a태그는(text-decoration:none;-밑줄제거, color:inherite; -글자색을 기본으로 상속받는다(보통 검은색))(a태그의 글씨는 text-indent로 화면밖으로 날려준다.
ul태그는(list-style:none; - 앞에 문자스타일 제거 , maggin:0 ; padding:0 ;- 보통 ul태그들은 위 왼쪽에 여백을 갖고 있기 때문에 제거하기 위함.
#높이(height)를 못주는 상황 일 때 padding으로 높이 조절할 수 있다.
#기본구조는 3단 or 4단을 쓰고 (3단 header, container, footer) (4단 header, nav, container, footer)
#이미지 불러 올때 div파일 만들고 css에 background(url()) 과 html에서 img태그를 쓰는 방법이 있다.
자기 폴더에서 불러올 때는 './' , 외부에서 불러올 때는 'http://' 를 주로 사용한다.
#보통 이미지를 불러올때는 background에 no-repeat(반복 금지), center(중앙 위치),/cover(해당칸에 그 크기대로 채운다) or contain(해당칸에 전체 그림이 다 보이게끔 채운다) cover란에 100px 나 %로 크기 조절가능하다.
fixed (이미지 고정시킬 때)-화면 넘어가는 거 구성할 때 주로 쓴다.
#박스 가로정렬 할 때 주로 float:left로 정렬하거나 display:inline block을 사용하고 float나 position사용 시 땅에 있는 게 아니라 margin : auto을 못준다.
#transition : all 1s - 동작시간 값 구하기.
#. a클래스명 :hover(한 칸 띄고). b클래스명 - a클래스를 누르면 b클래스에서 수행되는 행동들.
#말줄임표 쓰기.
우선 해당 영역보다 길게 글씨를 썼을 때 white-space:nowrap (문장을 한 줄로 표현) -> overflow:hidden; (넘치는 부분을 안 보이게 숨김) -> text-overflow: ellipsis (숨긴 것 중에 글자가 있으면...으로 표시)
# 줄간격 세로 ( line-height), 박스 크기를 결정할 때 너비와 높이 지정을 약간만 잘못돼도 박스의 너비는 균등하지 않고, 칼럼이 무너져 버리는 등 전체 레이아웃의 균형이 무너져 버립니다.
이럴 때 요소의 너비와 높이를 균일하게 유지해 주는 편리한 속성이 box-sizing : border-box;입니다.
#overflow-hidden : 넘치는 부분 다 숨겨준다. overflow-auto : 넘치는 부분 쪽만 스크롤바 달아준다.
#float :계열 쓸 때는 부모 쪽에 ㅐoverflow:hidden을 써준다. fixed는 화면을 바디에다가 고정해 주고 스크롤을 내려도 그 고정되는 위치는 변하지 않는다 (고정되는 부분은 배경색을 흰색으로 줘야지 고정된 것처럼 보일 수 있다.
그리고 웬만하면 사방값을 지정해 주는 것이 좋다.(left, right, bottom, top)
# 보통 가로길이를 정확히 모를 때는 padding이나 margin으로 글자 간 간격을 조절해 쓸 수 있다.
#text-align : 글자를 가운데 적용.
#container 작성 시 side 가 나눠져 있는 본문이라면 side와 본문에 부모값을 각각 다르게 설정하자. 그리고 container 부분에서 웬만하면 height를 주지 말고 그 안에 있는 박스들에 크기를 조절해 높이를 맞춰서 사용하자.
# 주로 쓰는 input 태그
(text , password, name(정보전달 ), label (id로 연결한다) , value (이름값, 기본값), radio (동그라미 체크 부분) checkbox (
체크박스 누르고 해제도 가능) submit (제출하는 것) reset (초기화하는 것)
placeholder (맨 처음에 해당칸에 유지되는 설명문 같은 개념 )
#마우스 갖다 대면 손가락으로 바꿔치기 화살표가
cursor:pointer 포인트를 손가락 모양으로, 아니면 a링크를 덮어씌운다.
#text-shadow : (x축 y축 번짐도 색상 = 중간에 ', ' 세미콜론 안 쓰고 그냥 한 칸씩 띄어쓰기로 나열 )
box-shadow : (x축 y축 번짐도 두께 색상)
rgba ( 빨, 초, 파, 0.*) : 4번째 소수점자리가 투명도 결정해 준다.
( 0,0,0 ,0 : 검은색) , ( 255, 255,255 0:흰색 ) 표시하고 투명도 조절가능.
#float는 패딩 안 먹히니 화면 양옆에 여분 공간 만들어 주려면 float를 활용해 left, right를 이용해 옮겨준다.)
이렇게 한번 정리해 보았다.
지금 생각나는 대로 정리하느라 내용이 모자라긴 하지 마 앞으로
이런 시간을 마련해 out put 정리를 해보는 시간을 가질 것이다.