기타/CSS6 티스토리 HTML/CSS로 폰트/텍스트 효과 주기 웹디자인 국비 학원을 다니고 취직은 결국 완전 무관한 곳으로 갔지만.. 이렇게 티스토리 블로그를 시작했으니까 퍼블리싱 조금 배운 것이 쓸모 있겠지?? 일단 티스토리는 특성상 글을 적는 플랫폼이기 때문에 심플하게 블로그를 꾸밀 요소엔도 폰트 컬러 글씨 크기 글씨 두께 이 정도가 있을 것 같다 ㅎㅎ 이 요소들을 꾸미는 건 많이 어렵지는 않다. 폰트를 제외하곤 솔직히 정말 간단하다. 가장 간단하게 블로그 텍스트 스타일들을 변경하려면 블로그에서 글을 쓸때, 상단 메뉴 중 기본모드 부분을 클릭한 후 HTML 로 바꿔야 한다, 바로 아래 사진처럼! 그럼 글씨가 엄청 빽빽하게 쓰여진 페이지가 등장할 것이다. 그럼 이제 원하는 효과 대로 변경해주면 된다. 각각 문장이 바뀔 때마다 다른 효과를 주어 텍스트 효과를 나타내.. 2020. 4. 4. CSS Battle #5 https://cssbattle.dev/play/5 CSSBattle CSS Code Golfing is Here! cssbattle.dev 다섯번째 문제. 일단 언제나처럼 전체 margin:0처리후 시작 이렇게 reset을 해줘야 원래 deault로 각 요소마다 가지고 있는 기본 마진이 사라진다! 일단 나는 이 문제에서는 각각 클래스를 주지는 않았고 그냥 nth-child()를 사용하였다. 어차피 여기서는 모든 요소가 p이기 때문에 nth-child(1)이렇게 쓰면 첫번째 요소가 그냥 선택된다. 만약에 요소가 여러가지 섞여있을 때는 nth-of-type()을 쓰기도 하는 듯? 아 만약 첫번째 요소나 마지막 요소를 선택하고 싶을 때는 first-child나 last-child를 적어줘도 가능하다. 혹시 .. 2020. 3. 17. CSS Battle #4 https://cssbattle.dev/play/4 CSSBattle CSS Code Golfing is Here! cssbattle.dev 네번째 문제. 저번 답안지를 작성하면서 원을 만드는 방법은 적었다. 그러면 저렇게 윗부분만 동그란 모양을 만드려면? 역시 간단하다. width값과 height값이 같을 때, top(왼쪽 위), right(오른쪽 위)의 border-radius 를 전체 크기의 절반만큼 주면 된다. bottom(오른쪽 아래), left(왼쪽 아래)j의 border-radius는 0으로 줘야한다. 아 근데 위의 원은 정확하게 만하면 정반원(?)은 아니다. 정원의 절반인 반원을 만드려면 width값을 height값의 2배로 먼저 만든다. 그 후, top(왼쪽 위), right(오른쪽 위).. 2020. 3. 14. CSS Battle #3 https://cssbattle.dev/play/3 CSSBattle CSS Code Golfing is Here! cssbattle.dev 세번째 문제. 일단 여기서 가장 중요했던 것은 모든 요소들이 다 가로와 세로에서 중앙정렬이라는 점. css에서 중앙정렬 하는 방법은 여러가지가 있다. 내가 모르는 방법도 분명 있을 것! 그 중에서 블럭 요소를 정렬하는데 많이 쓰이는 것으로 지금 딱 떠오르는 것은 2가지이다. 첫번째는 margin사용. 두번째는 position사용. 첫번째의 경우 원하는 요소의 스타일에 margin:0 auto 을 적용하면 된다. margin이란 요소와 요소 외부 사이의 간격을 의미한다. 크롬에서 f12를 누르거나 오른쪽 마우스 클릭하고 맨 마지막에 "검사"를 클릭하면 개발자도구가 나.. 2020. 3. 9. CSS Battle #2 CSS Battle #2 https://cssbattle.dev/play/2 CSSBattle CSS Code Golfing is Here! cssbattle.dev 이 문제도 솔직히 쉽다. 박스 4개를 만들고 정렬하기만 하면 된다. 나는 nth-child를 사용했는데 그냥 class값이나 id값을 사용해도 간단했을 것 같다. css position 속성 값은 relative, absolute, fixed, static이 있다. 주의해서 기억할 점은 자식 요소에 position:absolute;를 쓰려면 부모 요소에 position:relative;를 꼭 적어줘야한다. 그리고 만약 부모가 absolute여도 포지션 기준을 그 부모로 하고 싶을 때는 자식에 또 abolute를 적어주면 된다. 그리고 나같은.. 2020. 3. 8. CSS Battle #1 퍼블리싱 관련해서 CSS 공부할 사이트는 넘치고 넘쳤다. 근데 사실 퍼블리싱 프로젝트는 초안이 있는 상태에서 해야 하는 경우가 많을 거라고 생각한다. 그런데 솔직히 퍼블리싱 테스트 할때 초안 일일이 만들어 가면서 하기가 너무 힘들다. 사실 귀찮은 거지만..ㅎ 그래서 이거저거 게임으로 연습할 사이트가 어디 없을까 생각을 하던 중 CSS Battle이라는 웹페이지를 발견했다! https://cssbattle.dev/ CSSBattle CSS Code Golfing is Here! cssbattle.dev 만들어야하는 이미지가 정해져있고, 그걸 만들기 위해 CSS를 짜는 게임이다. 영어로 되어있는 페이지이지만 크게 어려울 것은 없다고 생각한다. 글자수로 계산해서 점수가 매겨지기 때문에 글자수를 적게써서 정답을.. 2020. 3. 7. 이전 1 다음
