Display
-
카카오톡 클론 코딩 #18 친구목록_행이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 24. 01:34
프로필사진, 닉네임, 상태메시지, 우측열의 형태로 구성되어 있는 친구목록_행은 친구창, 채팅창, 더보기창에서 모두 쓰이고 있습니다. 따라서 창마다 CSS를 만들 필요 없이, 친구목록_행에 필요한 CSS를 하나만 만들어 줄 수 있습니다. 이번 포스트에서는 친구목록_행을 구성한 다음, 복사-붙여넣어 주는 방식으로 수정해 보도록 하겠습니다. 그럼 friends.html의 친구목록_행인 friends_friend friend friend--lg를 복사하여, index.html의 친구목록_행 시작부분에 붙여 넣은 다음, 내용과 class명을 맞게 고쳐줍니다. 그리고 친구목록_행에 적용시킬 friend.css를 만들고 @import를 시켜 줍니다. 배경색을 주면, frined.css에 적용되는 수많은 친구목록_행을..
-
카카오톡 클론 코딩 #13 상태표시줄이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 19. 01:45
이번 포스팅에서는 상태표시줄을 만들어 보겠습니다. 그 전에, style.css에서 몇 가지 값을 default 하겠습니다. body에서 배경색은 흰색으로, padding값은 10px(상하), 20px(좌우)로 설정해 줍니다.(page ruler redux이용) 그리고 글자색은 #1D1D1D로 설정해 줍니다(pick color from page 이용) css파일과 html파일을 함께 볼 수 있도록, style.css는 창 위에, index.html을 창 아래쪽에 두도록 하겠습니다. 이제 status-bar.css라는 새파일을 만들어서, styles.css에 import 합니다. 아래와 같이 배경색을 넣어 보면, 상태표시줄 부분이 선택 되었다는 확인할 수 있습니다. 이번에는 dispaly: flex를 이용해..
-
CSS 위치(position, 포지션)이거 공부 했더니 어때?/HTML & CSS & JS 2020. 9. 28. 16:17
static: 기본값 fixed: 특정 위치에 고정 부모 요소가 아닌 브라우저 화면 기준(상대적 위치)으로 배치. 스크롤에 영향을 받지 않음. 페이지 내 공간을 차지하지 않음. z-index 값으로 앞/뒷쪽 배치 가능. relative: static(기본값)이나 abolute를 포함하는 부모요소에 따른 상대적 배치 z-index 값으로 앞/뒷쪽 배치 가능. absolute: 부모 요소에 따른 상대적 배치 스크롤에 영향을 받지 않음. 페이지 내 공간을 차지하지 않음. z-index 값으로 앞/뒷쪽 배치 가능. z-index: 수직 배치 값은 정수로 입력. 값이 클수록 앞쪽으로 배치.