2020.09.06_css 여러 가지 정리 노트
오늘은 배운 거 이것 저것 기본 세팅 부터 css 를 어떻게 사용해야할지..? 같은 것들의 정리 노트 이것 저것 잡다한 느낌의 정리 노트이다.
먼저 우리가 사람마다 쓰이는 웹 브라우저가 각각 다르고 그에 맞는 html 기능들은 점점 변화하고 생겨나고 있기 때문에, 현 시점에서 내가 쓸 기능들이 어떤 웹브라우저에서 작동할까 할 때 쓰는 페이지가 있다.
Can I Use
그럴 때 쓰이는 사이트로 Can I Use 를 들어가게 되면 현재 시간 기준으로 브라우저 별 기능을 지원하는지 안하는지를 알 수가 있다.
예를 들어서 float 태그를 친다면 여러가지 브라우저가 나오는데, 숫자는 버전, 색깔은 사용 가능 여부 이다.
( 참고로 IE 는 인터넷 익스플로러임. )
빨강 - 지원하지 않음.
초록 - 지원함.
회색 - 지원 가능한지 알 수 없음.
연두 - 부분적으로 지원함.
이렇게 각 기능마다 쓸 수 있는 브라우저 정리 사이트!
그리고 css 에서 만들기 전에 우리가 수많은 요소들을 넣을 틀들을 정리하는 것이 필요하다.
이런식으로.. 내 블로그를 가져와서 그림판으로..쭈글 틀을 한번 분리해보았다. 아마 각 네모가 클래스가 될 것이고, 네모 안의 네모들은 각 클래스가 되겠지! 당장은 따라서 클론 코딩을 할 만한.. 실력이 안되지만 이렇게 틀을 잡아가면서 하나하나 기능들을 넣다보면.. 언젠가는 나도 뚝딱뚝딱 만들 수 있지 않을까 ㅎㅁㅎ
이렇게 먼저 내가 만들 페이지를 구성을 하고 그에 맞게 틀을 짜면 css에 코드를 짤 때 구조적으로 편리하게 하나하나 짤 수 있을 것이다!
대충 그냥 오늘은 html과 css 파일을 하나씩 만들어서 공부할겸 고냥 새 폴더에다가 html과 css 를 만들어줘씀.
index.html 과 index.css 를 만들어줬고, css 를 연결하는 html 태그를 이용해서 연결해주어씀!!
그리고 태그 이름 * 갯수 하게 되면
뿅뿅짠짠...ㄹㅇ.. 나는 이거 듣고 신박했닼ㅋㅋㅋㅋㅋㅋㅋ하나씩 안쳐도 이렇게 하면 알아서 해준다 짝짝
또 클래스 같은 것들을 적을 때는 나름의 규칙을 가지고 적어줘야 협업이나 내가 구분하기에 편하다. 범용적으로 쓰이는 규칙들은,
네이밍은 하이픈(-) 사용을 기본으로 한다.
머.. 나는 _ ( 언더바 ) 잘 쓰긴해서 이거눈... 머.. 사람따라 ㅎㅁㅎ 기본은 하이픈! >>> 클래스 네임이 서버사이드 스크립트의 변수와 자바스크립트의 변수 정의시 혼돈을 방지한다는데 사실 잘 모르겠다 껄껄
시작의 이름은 영문 소문자를 사용하며 두 번째 단어부터 하이픈으로 연결하고 대문자는 사용하지 않는다.
ex ) post-wrapper
영문 소문자, 숫자, 하이픈만 사용할 수 있다.
언더바.....사용하지 말라는거 같다...흑
하이픈은 2개 이상의 단어를 조합할 때 사용하고, 3개 이상을 초과하여 사용하는 방법은 지양한다.
숫자가 없으면 '1' 이라는 숫자가 생략된 것으로 간주한다.
클래스 이름은 사용하는 장소, 사용하는 용도 순으로 정리하는 것이 좋다.
생각보다 규정화 된 규칙들이 있도라.. 그냥 막 쓴 나 반성.. 그래도 어느정도 범용적으로 쓰이는 것들이니, 써보면서 규칙을 서서히 녹아들게 하면 될 것 같다! 어디까지나 범용적으로 적어 놓은 규칙들이니!!
그래서 일단 클래스 네임을 작성 해보자. 그냥.. 작성해볼게여
위에 블로그 형태를 위에서 부터 순서대로 한번 해보았다. 그냥....적은거라서 ..ㅎㅁㅎ.. 보통 전체적으로 감싸는 틀은 wrapper 를 많이 쓴다고는 밖에.. 내가 아는건 전부다 쨋든 이렇게 나눠서 class 별 적용해주면 좋겠지!!
이제 다 구현은 못하겠지만 .. 여러가지 css 의 규칙들 !!
먼저 html 전체에 반응형을 할 수 있는 margin 값을 주고, 기본적으로 들어가있는 padding 값을 0으로 준다. 이 작업을 css 초기화라고 부르는데,
css 초기화 코드
브라우저마다 다르게 적용되어 있는 css 기본 값들을 제거해 주는 것을 뜻함.
동일 코드에서도 브라우저들마다 생성된 결과가 다르게 나오는 경우들이 있으므로, 브라우저의 css 기본 값을 제거하는 css 초기화 코드들을 써서 그런 상황들을 미리 대비할 때 쓴다!
찾아보면 막 긴 것들도 있고, 여러 가지 코드들이 있지만, 그때 그때 내가 써보면서 역시 쓸 거 쓰고 안 쓸 거 쓰는 그런게 필요한듯 하다.
그리고 font-size를 왜 써주었느냐, 그것은 우리가 밑에서 여러 폰트 사이즈를 rem으로 써줄 것이기 때문인데,
절대값, 상대값 차이
px
절대적으로 고정되는 값. 즉, 화면을 확대하거나, 모바일 사이즈로 가도 절대적으로 픽셀을 유지한다.
rem,em,%
상대적인 값들로, 화면을 확대할 때 마다 달라지는 비례값. 보통 위에서 우리가 처음 폰트 사이즈를 10px 로 사용해줬으니, 2 rem으로 값을 주면 20px 이 된다!
% 은 width에서 거의 사용
rem은 html 폰트 사이즈를 기준으로 계산, 보통 폰트 사이즈에 많이 사용하는 값.
em은 부모 태그의 폰트 사이즈를 기준으로 계산, 보통 padding 같은 곳에 사용하는 값.
웹 폰트의 기본 사이즈는 16px 이지만, 일단 rem을 쉽게 보기 위해서 10px으로 기본값을 설정해주었따!
또한 우리가 %를 많이 쓰다가, 반응형 웹디자인을 할 때 많이 쓰는 단위가 있다.
vw
는 화면 기준 몇 퍼센트를 채울지 말하는 것이다. 가로단위
vh
는 화면 기준 몇 퍼센트를 채울지 말하는 것이고, 세로 단위이다.
메뉴를 네브바로 만든다고 가정했을 때, 이렇게 적어주게 되면,
ㅎ..디자인은 보지말고 기능에 집중을 해보자. 이렇게 내가 보는 화면에 가로는 100프로, 새로는 50을 채우게 된다.
이렇게 화면을 줄여도 똑같이 비율이 적용이 잘 되는 것을 확인할 수 있다.
이제 기능들?? 을 하나씩.. 두서는 없지만 유용한 것 위주로 정리쓰
링크 스타일도 여러 가지가 있길래, 그냥 홈 화면으로 돌아가는 a 태그를 만들어주고,
링크 태그는 배울 것이 많습니다.... 후 또 이 태그들을 써주는 순서도 중요한데, 보통 밑에 적은 것들이 제일 큰 효과를 발휘한다. 그것보다 더 큰 효과는 상속된 태그들인데, 밑에 따로 적겠음! 쨋든 a 태그의 link, visited, hover, active 순서로 적어주는 것이 좋다구 하더라.
또한 기본적으로 쎈 순서는 body < div < span < . ( class ) < # ( id ) 이런식이다! 이것도 근데 쓰기 나름이고.. 가변적이라 참 어려운 것 같다.
일단 저 위에 a 태그에 대한 속성들은코드로만 보면 어렵지만, 사진으로 본다며는
각각 이렇게 뜬다 ! 후 그림으로 나도 해보니까 알겠닼ㅋㅋㅋㅋ
나머지 설명들은 태그 참고 ! font-weight 도 증맬.. 파고 드니 신기하구만
또 클래스 상속을 여기서 따로 다뤄보자. 우리가 밑에 써줄 수록 효과가 강력하다고 했는데, 상속된 클래스는 좀 더 강하다.
클래스 상속
body p body ( 부모 선택자 ) 안에 있는 p ( 자식 선택자 ) 를 선택.
body > p 공백과 비슷한 역할을 하지만, body 와 p 태그 사이에 다른 태그가 없는 순수 부모 - 자식 관계에서만 적용
body + p body 안에 있는 가장 인접해 있는 p 태그 하나에만 적용.
body ~ p body 안에 있는 모든 p 태그에 적용
이렇게 여러 가지의 방법으로 쓸 수 있고, 이렇게 쓴 상속 문자들은 밑에 있는 스타일 보다 강력하게 적용 된다.
또한, 만약 내가 여러가지 태그 중에 몇 개만 똑같은 값을 쓰고 싶다면?
이렇게 css 에서 먼저 클래스를 사용하는 문법으로, 이렇게 적어주고,
이렇게 클래스마다 css 를 적용시킬 필요 없이 먼저 css 에서 클래스를 주고 , html 상에서 클래스 상속을 통해 줄 수가 있다. 띄어쓰기로 적어주면 상속이 마찬가지로 된다.
그러면 해당 애들만 이렇게 내가 준 효과들을 넣어줄 수가 있다!
또 다른 기능하나... 내가 필요함...
이렇게 내용들을 적어주고, 대충 네모상자를 만들어 주게씀. 그냥 보여주기 위해서!
이렇게 써주게 되면, 밑에 있는 클래스들이 겹쳐져 있을 때, 마진을 줄 수가 있다. 나는 여기서 em을 썼고 그럼 10px이 되는것.
그럼 이렇게 클래스들이 붙어있을 때 마진을 알아서 주게된다.. 게시판 만들 때 유용하게 쓰일덧
두서 없지만 다음은 검색 기능으로 간다!
input name
인풋 요소의 이름을 명시. 폼이 제출된 후 서버에서 폼데이터를 참조하기 위해 사용 되너가, 자바스크립트에서 요소를 참조하기 위해 사용
input type
인풋 요소의 타입을 명시. search 타입은 검색요소에 사용 되며, 텍스트 필드처럼 동작.
placeholder
속성은 input 요소와 textarea 요소에 알맞은 힌트를 제공하는 목적으로 사용.
지금은 검색상자에 데이터를 입력하는데 도움을 줌!
placeholder 가 뭔지 모르겠으면 그림으로 보면 편하다.
이렇게 검색어를 입력하세요 라고 보통 우리가 검색할 때 보여지는 이것이 바로 placeholder 이다.
얘는 어떻게 css 를 꾸며주느냐..
이렇게 써주면 된다. 디자인은 빼고..일단 이렇게 써준다는 것만 알고 보면,
이렇게 뜨게 되는데, 여기에 검색어를 입력하게 되고 검색을 하게 되면,
이렇게 url 상에 우리가 아까 써줫던 name 으로 넘어가게 된다.
근데... 하나 더.. 저 자동완성 신경쓰인다......
그럴 땐 html에 autocomplete를 추가해주자. 얘가 디폴트 값이 on 이라서 자동완성 되는거라서 저거를 off 해주게 되면
짝짝 자동완성이 안 뜸
마지막으로 잡다한 팁 같은 것들 정리하고 끝끝....
unset
이거는 위에 있던 태그들에서 만약 기능을 제거해주고 싶다면 쓸 때 쓰는 기능. 밑에다가 이렇게 쓰면,
이렇게 세팅 기능이 초기화가 됨.
우리가 가로 정렬 세로 정렬할 때, justify - content 와 align-items 를 각각 써줬었는데 만약 flex 랑 같이 써줬다면, 그 둘은 flex-direction 에 따라 바뀌게 된다.
모르는 사람들은
2020.09.04_css_게시판 목록 만들기
2020.09.04_css_게시판 목록 만들기_정리노트 바로 네비바 이어서 게시판 목록 css 도 정리! 여기서 쓸 클래스와 태그는 post_wrapper, p,img, h1 태그! 다시 캡쳐했지만,,, 증맬 별거가 없균... 일단 하나하나
korinkorin.tistory.com
여기에 자세히는 아니지만 써있슴미다.
flex 는 기본 가로이므로 flex 를 줬을 때, justify - content 는 가로 정렬, align-items 는 세로 정렬이 유지되지만,
flex-direction 을 세로로 주게 되면 둘이가 바뀌어서 justify - content 가 세로 정렬, align-items 는 가로 정렬이 된다.
flex-wrap
은 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성.
nowrap
기본 설정값으로, flex-container 부모요소 영역을 벗어나더라도 flex-item 요소들을 한 줄에 배치한다.
시작점은 flex-direction 에 의해 결정된 방향으로 적용
wrapflex-item
요소들이 여러 행에 걸쳐서 배치됨.
nowrap 속성과 마찬가지로 요소가 배치되는 시작점은 flex-direction에 의해 결정되고 일반적으로 위에서 아래로 쌓이는 순서이다.
wrap-reversewrap
속성값과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치되는 속성.
flex는 정말..무궁무진해.............
역대급으로 길군........진짜 애니메이션은 몰라가지고 아직 정리를 못했는데도 이정도 분량이면........정말 css 는 공부를 많이 해야겠다...허어유ㅠㅠㅠㅠ 그리고 css 는 역시.. 직접 해보면서 또 쓸 때 그때마다 보는 게 제일인듯... 내가 나중에 이 노트가 유용하게 쓰이길 빌면서 포스팅 마침 안녀엉
'html & css' 카테고리의 다른 글
| 2020.09.12_django_summernote (1) | 2020.09.13 |
|---|---|
| 2020.09.11_css_글쓰기 페이지 꾸미기 (0) | 2020.09.11 |
| 2020.09.11_django_modelform_custom (0) | 2020.09.11 |
| 2020.09.04_css_게시판 목록 만들기 (0) | 2020.09.05 |
| 2020.09.04_css_네브바 만들기 (0) | 2020.09.05 |
댓글