Jay

div가 아니라 btn같은 것들, inline-block같은 것들은 text-align을 이용하면 중간으로 정렬이 된다. 그래서 텍스트 온라인 같은 경우에는 센터를 이용하면 요소들을 중간으로 정렬할 수 있지만 블럭 레벨은 적용이 되지 않는다. 블럭 레벨은 margin-auto;를 주어서 센터로 만들어야한다. 그래서 마진 오토와 텍스트 얼라인은 수평으로 중간 정렬 가능하지만 수직으로는 가운데 정렬이 안된다. 트랜스폼을 이용하면 되는데 트랜스폼은 움직이는 거 로테이션 하는 것들 가능하다 text-align : center; 수평으로 중간 line-height : 100px; 수직으로 중간 해키한 방법이다. transform: translate & line-height 학습하기 text-align에 대한 추가..

스티키는 기존에 들어있던 자리를 유지하다가 스크롤링 되면서 더 이상 보여지지 않는 시점에 사용자가 지정한 top left 포지션에 붙어 있고 또 하나 중요한 포인트는 그 자리를 그대로 공간을 유지하고 있어서 다른 요소들도 그 자리에 그대로 있다. fixed는 들어있는 부모와는 상관없이 뷰포트 안에서 포지션이 일어나기 때문에 빠져나온다 결론적으로 스티키를 쓸 때는 top left같은 포지션을 지정해 주어야 하고, 스티키는 또 있던 그 자리를 유지하면서 스크롤링이 될 때 고정이 되지만 fixed는 완전히 기존의 문서에서 나와서 상대적으로 뷰포트에서 포지션이 결정된다는 것

box2에서 content-box는 content자체가 width와 height을 결정하기 때문에 패딩을 얼마나 넣든 보더를 얼마를 넣든 컨테이너 사이즈는 변경되지 않는다. 100*100 그대로 유지된다. 박스 스타일링 할 때 박스 사이징을 border-box로 만들면 보더까지 포함하도록 만들게되면 width와 height을 100*100으로 지정했을 때 패딩과 보더를 넣은만큼 컨텐츠가 작아지는 것을 말한다. 그리고 통상적으로 패딩을 넣는다는 것은 박스 안에 여백을 만드는 것이기 때문에 대부분은 보더박스를 이용해서 사용하게 된다. position의 기본값은 static이고 static을 했을 때는 top left 이런 포지션 관련된 속성을 써도 아무런 상관이 없다. relative는 원래 있던 공간은 유..

카테고리별로 버튼 만들고-링크걸고 카테고리별로 설명

1 skills - skills&attributes - description 2 Skills 세부사항들 2. Tools 목록 지정하기 Visual Studion Code Atom Android Studio Code iOS development tools Sketch app 3 etc 목록작성 Git design passion of analysis

navbar#navbar section#about .navbar__logo ul.navbar__menu>li.navbar__menu__item*6 Home About Skills My work Testimonial Contact 이미지 태그 넣는법 img.home__avatar h1.home__title 줄바꿈 Hello, I'm Dream Coder button.home__contact 작성순서도 ccode class 지정=> class를 major변수명으로 지정 class안에 아이콘 지정=>아이콘 명지정(favaicon) => class title지정 => class description지정

html에서 컴포넌트 클래스 이름을 작성할 때 매우 복잡하고 유지 보수 하기가 힘들어서 클래스 이름을 작성할 때 잘 작성할 수 있을지에 대해서 이름을 작성하는 방법에 대해서 정의한 규칙이다 프로젝트를 모듈화해서 만들고 포스트 css 같은 애들을 이용하게 되면 이런 bem은 필요없지만 모듈화를 이용하지 않고 간단하게 프로젝트를 만든다면 뱀을 이용해서 만들면 더 쉽게 이름을 만들 수가 있다. 이름그대로 modifier으로 나누어서 이름을 작성하는 것을 말한다. 또 뱀은 하이라키(hierarchy)대로 이름을 일일이 다 작성하는 것이 뱀은 아니다. 뱀은 컴포넌트 단위로 블럭 레벨로 이름을 작성하는 거기 때문에 카드(예시) 카드 자체로 하나의 컴포넌트이다. cards는 이런 카드를 묶어 놓는 컨테이너일 뿐이다...

meta name="description" content="Portfolio for world-renowned software engineer Jay">    meta name="author" content="Jay">

web_css 7. css 선택자의 기본 font-size:45px; #글자크기 -------------------------------- text-align: center; #중앙정렬-- ------------------------------------ .saw { =>.saw(saw 모두 선택함) color:gray; } class="saw" ----------------------------- ---------------------------- .active { color:red; } --------------------- class="saw active" ------------------- ------------------------------ - class="saw" id="active" id선..