CSS 스타일 종합1

안녕하세요 예슬입니다.

 

네이버 플랫폼 구축하다가 이게 웬 날벼락일까 싶습니다만

 

갑자기 퍼블리싱을 하게 되었어요 ㅠㅠㅋ

 

하지만 퍼블에 대한 이해도를 높이고자 열심히 기록&코딩을 하려고 합니다.

 

그날그날 제가 알게된 지식들을 이렇게 작성하고, 

 

나중에 제목 하나에 새로운 지식 하나 이런식으로 다시 정리 하여서 나중에 찾기 쉽게 할려구 해요!

 

일단 지금은 일을 하고있으니까 틈틈히 작성해보도록 하겠습니다.

 

 

하나. 제가 하고있는건 반응형 모바일 웹을 만들기 위해서 코딩중입니다.

 

여기서 궁금증 하나. 반응형 모바일 웹 이란? 이라는게 있을 수 있겠네요.

 

그건 앱을 만들때 네거티브 앱 & 하이브리드앱 & 모바일 웹 형태가 있다고 하더라구요. 

 

저도 맨날 찾으면서도 까먹어가지고 나중에 자세하게 포스팅 하도록 할게요.

 

 

둘. 앱을 만들다보면 제일 걱정되는게 사이즈 조절하는걸텐데요, 이것도 따로 포스팅 해야겠네요.

 

정말 많은 지식들이 필요하더라구요. 그중에 저는 어떤 방법을 택했냐면

 

배경화면은 꽉 채우되, 사진이 작으면 늘어지게하고 로고는 늘어지지않도록 따로 박았어요.

 

이게 맞는지는 모르겠지만 제가 알고있는 지식 선에선 최선이었거든요..ㅠ

 

그래서 배경은 

 

html{

background:url(img/back.png) no-repeat center center fixed;

background-position:0% 0%;

background-size: 100% 100% ;

height: 100%

}

 

이렇게 들어가면 꽉채워진답니다!

 

 

셋. 그리고 또 제가 찾아봤던게 input 태그에서 타입값 고르는 방법과 input 안에있는 속성값에 접근하는 방법!

 

input[type=password]{margin-bottom: 1%;}

input::placeholder{padding-left: 50px}

 

 

 

넷. img를 중앙정렬하는방법으로

 

img는 display:inline-block; 속성이여서 display:block 으로 속성을 바꾸고 margin:auto로 바꾸어주면 중앙정렬이된다!

 

margin:auto 하면 중앙에 정렬되는 꾸르팁은 알겠지?

 

다섯. div 내 글자 중앙정렬(수직)

수평 중앙정렬은 text-align:center 로 하면 되나.. 수직은..?

 

line-height: 90px; //height만큼!

이 속성을 사용하면 된다.

 

여섯. table 셀 합치기

 

가로로 합치기 : colspan

세로로 합치기 : rowspan

 

헐 테이블 내용 모르겠음

https://www.codingfactory.net/10510   테이블 스타일 관련

https://m.blog.naver.com/PostView.nhn?blogId=pjh445&logNo=220065137256&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F    테이블선택자관련

 

으으... 오늘은 여기까지~

내가 이런걸 찾아보면서 했구나 하면서 다시한번 공부하는 계기가 되니 좋은듯.