2022-05-11
텍스트 글자쓰기 방향 지정
rtl: right to left
ltr: left to right
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-indent: 15px;
text-indent: 5%;
line-height행간
white-space: nowrap; 줄바꿈
overflow: hidden; 넘치는 부분 감춤
text-overflow:ellipsis; 말줄임표
overflow: visible; 마우스 오버 시 넘치는 부분 보임
보통 행간을 조정할때 1.5~2.0 사이를 많이 쓴다고 한다. 대학교 전공과정에서 배웠던 내용인데, 세리프체는 서체에 여백이 많아서 행간을 가깝게 두고, 세리프체는 네모박스에 정연하게 꽉찬 서체기 때문에 답답하지 않으려면 행간을 넓게 두어야 한다.
리스트 태그
리스트 태그에는 <ul> <ol> 가 있고 style로 꾸밈도 가능하다
list-style-type:로 지정하고 속성으로
square: 검은 네모,
desc: 기본 (검은 점),
circle: 흰 점,
none: 효과 없음이 있다.
list-style-image: url('주소/경로')로 이미지로 효과를 줄 수도 있다.
<ol>은 넘버링 태그인데,
list-style-type:로 지정하고 속성으로
decimal,decimal-lading-zero,lower-roman,upper-roman,lower-alpha,lower-latin,upper-alpha,upper-latin,armenian,georgian를 줄 수 있다. 매우 다양하다.
패딩, 보더, 마진
패딩(Padding)은 콘텐츠 자체의 크기를 키워주는 느낌이다. 콘텐츠를 중심으로 늘어나며 Border(보더)는 그 바깥을 덮고, Margin(마진)은 보더의 바깥에 주어진다.
background-clip (box모델)
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-image
background-image: url('경로');
반복 옵션 : repeat | repeat-x | repeat-y | no-repeat
background-size: 500px 300px
auto | contain | cover | <크기 100px 200px> | <백분율 30% 30%>
의도에 따라 원하는 사진 부분만 보여주고 주변은 자를 수도 있다.
!! 이미지가 중요한 이미지인가 아닌가, 의미가 있는가에 따라서 태그를 다르게 쓸 수 있다. (html)<img> 는 alt속성을 통해 웹(기계), 검색 엔진, 텍스트 리더기(보조도구)가 이미지의 정보를 인식가능하게 만든다. (CSS)background-image 로 쓰인 태그는 이미지를 인식하지 못한다.
필요에 따라 선택하여 불필요한 정보가 읽히지 않게 하는게 바람직.
참고
- img는 그대로 img태그를 쓰면 되고, bg-image는 div박스를 만들어 넣는 방법이다.
- 웹도 3차원이라는 사실!
Semantic Web
시멘틱 웹. 의미론, 의미론적인 웹. 웹을 구성하는 요소들에 의미를 부여해서, 사람+기계도 인식가능한 형태로 제작된 웹페이지.
뿐만 아니라 Sematic naming을 통해 이름도 의미있게 짓는 문화를 지키는 것이 좋다.
장점
- 검색 최적화
- 텍스트 리더기(보조 기구)로 이미지 해석 가능
- 유지보수가 수월해짐
- 같은 태그로 묶이던 구성 요소들이 분리되면서 디테일한 스타일링 가능
background-position
백그라운 포지션에는 수평과 수직으로 위치를 조정할 수 있다.
아래의 작성코드로 예시 이미지를 보자.
수평위치 : left | center | right | <백분율> | <길이값>
수직위치 : top | center | bottom | <백분율> | <길이값>
background-origin
이미지 위치 조정. background-img와 함께 쓰면 된다.
추가로, 아래의 코드 처럼 각 div에 이미지를 개별적으로 주면 이미지를 세 번 불러오는 것이 된다. 같은 이미지를 쓸 때는 style칸에서 div에 이미지 1개로 3칸 모두에 적용시키면 좋다. CSS의 style sheets는 공백조차 용량이 엄청나기 때문에 압축(미니파이) 과정을 거치기도 한다... 따라서 코드는 최대한 줄이는 것이 좋다(사실 다른 언어 코드들도 마찬가지).
background-attachment
속성에는 background-attachment:fixed 와 scroll이있다.
fixed : 스크롤을 아무리 내려도 배경이미지가 고정되어있다
scroll : 이미지가 컨테이닝한 블록과 함께 움직인다
gradient
linear-gradient 선형 그라데이션
radial_gradient 원형 그라데이션
radial_gradient(circle, to bottom, blue, white);등등...
괄호 안에는 각 지정한 자리에 의미가 다 있기 때문에 순서에 맞추어 써야한다.
어려웠던 것
속성 값에 대해 해결못한 것은 없지만, 기본적인 보더라인을 주는 것은 왜이리 안되는 지 모르겠다...
해결 방법
많이 해보고 익숙해지는 게 답인 것 같다.
소감
개발 일지를 타이핑하면서 한번씩 코드를 더 써보게 되는데, 그게 학습시간에 신속하게 따라가는데 도움을 많이 주는 것 같다. 평소에 웹페이지 돌아다니면서 멋졌던 효과, 재밌는 효과들이 이미지를 넣은 것이 아니라 실제로 코딩이 꾸미기 가능하다는 사실이 새삼 체감된다. 응용은 다른 문제겠지만...
