SMU개발자

이번 프로젝트로 채팅을 하다보니 채팅방에 너무 긴 최근 메시지는 좀 짤라야 할 필요가 생겼다.그래서 내가 원한 크기만큼만 보이고 그 뒤에는 짜르고 ...을 붙이는 과정을 진행해 볼것이다. 위 처럼 보시다 시피 1줄로 깔끔하게 하고 싶다는 욕구가 생길 것이다. 먼저 여러줄로 나눠질 글자를 white-space:nowrap으로 한 줄로 쭉 나오게 만든다. 한 줄로 쭉 나오게 되면 width로 나올 길이를 지정한다. 그 뒤에 넓이가 넘어가는 부분에서는 overflow: hidden으로 그것을 가려줬다. 그리고 text-overflow: ellipsis; 로 텍스트가 넘어가면 ...이 나오는 옵션을 설정해준다. 결과창

모든 HTML 페이지의 첫 번째 스타일시트는 초기화 코드로 시작한다. 초기화 코드는 모든 웹 브라우저에서 동일한 출력을 만드는데 사용한다. 페이지 구성할 때 도움되는 사이트http://shoelace.io

전체 선택자 보기 속성 선택자 . 후손/자손 선택자 동위 선택자 반응 선택자 나머지들 선택자를 좀더 다양하게 다뤄보면서 게임같은 걸 할 수 있는 사이트가 있으니 연습할겸 해보면 좋을것 같다.http://flukeout.github.io/

1. position - 배치 방법 정하기웹 문서 안의 요소들을 자유자재로 배치해 주는 속성으로 텍스트나 이미지를 나란히 배치할 수 있꼬 여러개의 요소를 가로나 세로로 원하는 위치에 배치할 수도 있다.position: static | relative | absolute | fixedstatic - 요소를 문서의 흐름에 맞추어 배치한다. (기본값)relative - 이전 요소에 자연스럽게 배치하되 위치를 지정 가능absolute - 원하는 위치를 지정한다. fixed - 지정한 위치에 고정해 배치한다. 화면에서 요소가 짤릴 수도 있다. 위치를 조절 할때는 top, bottom, right, left로 사용한다. top:0; left:0; 으로 지정 했을 경우 위에서 0만큼 떨어지고 왼쪽으로 0만큼 떨어진 ..

포지셔닝 핵심내용float - 왼쪽이나 오른쪽에 배치z-index - 요소의 쌓는 순서 결정clear - float 속성 해제position - 배치방법 지정visibility - 요소를 화면에 표시하거나 감추기border-collapse - 테두리 합치기table-layout - 콘텐츠에 맞게 셀 너비 지정vertical-align - 셀 안에서 수직 정렬 포지셔닝이란?우리가 원하는 요소들을 화면이라는 네모창에 딱딱 맞게 넣어주는 것 네이버 창 같이 여기저기에 적재적소 하는것.브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할지를 결정하는 것이 지금부터 배울 float과 position이다. 1.box-sizing - 박스 너비 기준 정하기박스 모델을 배치하려면 우선 박스 모델의 너비를 알아야한다. w..

레아이웃의 핵심width, height - 박스 모델의 너비와 높이display - 화면에서 요소가 어떻게 보일지를 결정하는 요소border - 박스 모델의 테두리margin - 박스모델의 마진(요소와 요소 사이의 여백)padding - 테두리와 내용 사이의 여백border-radius - 박스 모델의 모서리를 둥글게 처리 1. 블록 레벨 요소와 인라인 레벨 요소박스모델은 크게 2가지, 블록 레벨과 인라인 레벨로 나뉩니다 블록 레벨은 혼자 한 줄을 차지하는 요소이다. 모바일 화면이 너비는 고정된 채로 화면을 아래로 쭉쭉 내리는것을 볼 수가 있는데 이게 블록 레벨이다. 반면에 인라인 레벨은 줄을 차지하지 않는 요소이다. 즉 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있..

색상과 배경을 위한 스타일 핵심 요약background-color - 배경색을 지정하는 속성background-image - 배경 이미지를 지정하는 속성background-repeat - 배경 이미지의 반복 방법을 지정 하는 속성background-position - 배경 이미지의 위치 지정하는 속성background-attachment - 배경 이미지의 고정 여부를 지정하는 속성background-size - 배경 이미지의 크기를 조절background - 배경을 한꺼번에 지정하는 속성 1. background-color 배경색을 바꾸는 기능으로써 색상을 세밀하게 조절하고 싶으면 16진수 #ffff00 을 사용하고 투명도도 함께 조절하고 싶다면 rgba를 사용하고그냥 원색을 사용하겠다면 색상의 이름을 ..

1.순서 없는 목록에서 불릿 모양 바꾸기ul을 사용할 때 번호가 없이 그냥 나오는 부분에서 불릿 모양을 없애거나 다른 모양으로 교체할 수 있다.먼저 에 list-style-type: none을 해서 적용 할 경우 불릿을 아예 없앨 수 있다. 아니면 값 부분에disc(채워진 원), circle(빈 원), square(채운 사각형)으로 모양을 변경 가능하다. 2.순서 있는 목록에서 숫자 바꾸기이번에는 ol에서 사용되는 숫자를 바꿀 것이다. 디폴트 값으로 1,2,3.. 이 적용이 되지만 이것은 01,02,03.. 혹은 (decimal-leading-zero)소문자 로마숫자 혹은 (lower-roman)대문자 로마숫자 혹은 (upper-roman)소문자 알파벳 혹은 (lower-alpha, lower-latin..