맨 땅에 프론트엔드 개발자 되기

BEM CSS 는 Cascading Style Sheet 의 약자다. Cascading 의 뜻을 검색해보면 '폭포수처럼 흘러내리는' 이라는 뜻이 나온다. 이것은 CSS가 부모에서부터 자식으로 폭포수처럼 상속되어 적용된다는 뜻을 가지고 있다. 그래서 CSS를 작성할 때는 이 상속관계에 대해서 잘 알고있어야 현재 Element에서 어떤 속성이 적용되고 있는지 알 수 있다. 이러한 CSS 작성 규칙을 예측 가능하게 잘 해보자는 의미에서 나온 방법론이 바로 BEM 이다. BEM은 CSS 작성을 할 때 필요한 Class 명을 어떻게 지을 것인가에 대한 방법론이다. Depth가 별로 깊지 않은 프로젝트에서라면 아무렇게나 클래스 명을 지어도 상관없지만 프로젝트의 규모가 커지고 Depth가 깊어질 수록 클래스 명을 중..

웹브라우저에서 내가 만든 웹페이지의 글 내용을 드래그 못 하게 하는 방법. 간단하게 CSS로 처리할 수 있다. body { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } 브라우저 별로 다 막아준다. 일부 영역에서는 드래그를 허용하고 싶으면, 위의 코드를 body 영역에 기본으로 넣어주고, 원하는 영역에 아래 코드를 적용한다. .allow-to-drag { -webkit-user-select:all; -moz-user-select:all; -ms-user-select:all; user-select:all } 텍스트만 드래그를 허용하고 싶을 때, .allow-to-drag-text { -webk..

어떤 일정한 크기의 요소가 반복될 때 그 요소의 내용의 길이가 들쭉날쭉이라면, 내용을 말줄임을 해서 크기를 일정하게 유지하고 싶을 때가 있다. 그럴 때 사용할 수 있는 것이 바로 text-overflow: ellipsis; 이다. 적용하기 전 Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique harum impedit sint possimus minus repellendus repellat? Quae delectus expedita quam ea fugiat quidem itaque minima asperiores? Aliquam magnam unde nihil. Explicabo voluptatem maiores dignissimos ..

웹페이지를 만들 때 폰트는 웹 디자인에 있어서 중요한 한 부분이다. 인터넷이 발전하면서 많은 디자이너 분들이 웹폰트를 만들어오셨고, 우리는 그 중 무료로 배포된 웹폰트를 가져다 써보려고 한다. 물론, 유료 웹폰트도 구매하면 사용가능하지만... 가난한 학생은 무료로 배포된 웹폰트를 감사한 마음으로 사용하렵니다... 무료 웹폰트를 구글에 검색하면 수많은 페이지들이 나온다. 나는 그 중에서도 가장 널리 쓰이고 유명한 구글 웹폰트를 사용해볼 것이다. 구글 웹폰트는 개인 작업용 뿐만 아니라 상업용으로도 사용이 가능하고 영어와 한글 둘 다 있다는 장점이 있다. 저작권에서 자유로울 수 있다는 점! 감사합니다 구글~~~ https://fonts.google.com/?subset=korean Google Fonts Ma..

CSS 공부를 하면서 아마 가장 재미있었던 부분이 transition과 transform을 공부했을 때 였던 것 같다. 시각적으로 가장 눈에 띄고 재밌는 효과를 줄 수 있는 부분이 많아서 였던 것 같다. transform 은 대상자의 모양을 변형시키는 속성이고, transition은 그 대상자의 모양이 변형되는 지속시간을 설정하는 속성이다. Transform의 속성들과 예제들 transform의 속성 transform의 속성에는 아래와 같은 것들이 있다. translate : translate은 한국어로 하면 '번역하다' 라는 뜻이지만, 기본 의미 원형에는 '옮기다'라는 뜻이 있다. 그래서 말 그대로 옮기는 속성이다. scale : 대상의 크기를 배수로 확대/축소하는 속성이다. rotate : 대상을 회..

지난 게시물에서 Flex에 대해 공부했는데, 오늘은 Flexbox들의 정렬 방법인 justify-contet와 align-items에 대해 공부해볼 예정이다. https://babycoder05.tistory.com/entry/%EC%BD%94%EB%94%A9%EB%8F%85%ED%95%99-CSS-display-position-flex 코딩독학) CSS display, position, flex 박스 사이즈를 조절하는 방법에 이어서 박스를 배치하는 방법에는 display와 position 이라는 개념을 알아야 한다. Position 포지션의 속성값에는 아래와 같은 속성들이 있다. static: 디폴트 값이며, 아 babycoder05.tistory.com Flex의 속성값에는 box들을 감싸고 있는 c..