'WEB&SNS' 카테고리의 글 목록

WEB&SNS (409)

백그라운드 CSS 이미지 넣는 방법 및 반복속성에 대한 설정

WEB&SNS/CSS 친절한효자손 2018.10.23 00:02

이번에는 HTML에서 백그라운드 (배경) 에 이미지를 넣는 방법입니다. 색을 부여하는 방법은 background : #원하는 16진수 색상코드 ; 를 CSS에서 부여하면 간단히 해결 됩니다. 이미지는 과연 어떻게 넣을까요? 알아보겠습니다.먼저 백그라운드 색상을 지정하는 방법입니다. 보시는 것 처럼 원하는 선택자를 입력하시고, 속성 요소에 화살표가 가리키는대로 마크업 하시면 됩니다. 16진수로 색상을 입력하거나 이미 지정된 색 명칭으로 넣으시면 됩니다..

border 테두리 속성에 대한 CSS 태그 및 요소 사용법

WEB&SNS/CSS 친절한효자손 2018.10.22 00:05

오늘은 CSS 스타일 중 border 태두리 속성에 대해서 배웠습니다. 사용법은 간단합니다. 테두리가 어떤 형태로 나타나는지, 그리고 해당 요소는 무엇인지만 기억해 주시고, 적절한 문장을 강조하고자 할때, 한 문단을 감싸고자 할 때 적시적소에 쓰시면 되겠습니다.우선 마크업 상태를 확인해 주시기 바랍니다. 그리고 본문 body 안쪽에는 단락 요소인 p태그를 사용했고 짧은 문장을 몇 개 적었습니다. 그리고 p태그는 class 값을 부여했습니다. 각 클래..

문장의 줄 간격을 조절하는 line-height 사용 방법

WEB&SNS/CSS 친절한효자손 2018.10.21 00:04

HTML 문서 내의 텍스트 문장의 줄 간격을 조절하는 CSS 요소가 있습니다. line-height 를 사용하시면 됩니다. 단위는 px, %, em을 사용하시면 됩니다. 참고로 1em은 100%를 의미합니다. 0.5em은 50%를 뜻하게 되는 샘 입니다. 역시 말로는 이해하기가 어려우므로 바로 사용 방법을 배워보겠습니다.본문 전체에 적용하도록 내부스타일로 저렇게 마크업을 해두었습니다. 근데 살펴보시면 수치에 대한 단위를 표시하지 않았습니다. 이 경우..

CSS 스타일 요소 : 글자 자간(간격)을 조절하는 letter-spacing 사용 방법

WEB&SNS/CSS 친절한효자손 2018.10.19 00:06

글씨 사이를 자간이라고 합니다. HTML 텍스트도 CSS 스타일을 사용해서 자간 조절이 가능합니다. 촘촘하게 만들수도 있으며, 넓게 넓게 떨어뜨릴수도 있습니다. 제목에 나온 letter-spacing 요소를 사용하시면 가능합니다. 바로 본론으로 들어가겠습니다.내부스타일 방식을 사용했습니다. 본문의 p태그에 클래스값을 부여했습니다. 만약 수치값을 0으로 입력하면 어떤 변화가 생길까요?아무런 변화가 없습니다. 해당 글꼴에 대한 기본 자간 스타일로 출력됩..

텍스트를 꾸미는 text-decoration 태그 요소 사용 방법

WEB&SNS/CSS 친절한효자손 2018.10.18 00:02

오늘은 텍스트 데코레이션 요소들에 대해서 다시한번 짚고 넘어가는 시간 입니다. 전 시간에 아마 한번 언급했던 부분이 있을 수 있겠는데요 복습한다는 마음으로 다시한번 봐주시면 감사하겠습니다.a링크에 대해서 말씀 드릴 때 나왔을수도 있는 부분입니다. 복습겸 다시한번 살펴보도록 하겠고, 여기에 오늘의 주제인 text-decoration 태그 스타일에 대해서 다양하게 다뤄보도록 하겠습니다. 태그라는게 알수록 신기하고 재밌네요. 이런 맛에 코딩을 하는 것 같..

CSS 태그 간격 늘리는 padding 그리고 margin 차이점 그리고 사용 방법

WEB&SNS/CSS 친절한효자손 2018.10.17 00:04

오늘 수업은 매우 알찼습니다. padding (패딩) 그리고 margin (마진) 에 대해서 다시한번 그 개념을 짚는 시간이었습니다. 또한 다양한 쓰임새를 파악할 수 있었습니다. 예전에 이게 너무 햇갈려서 사용하는데, 그리고 수정하는데 어려움이 많았지만 지금은 입맛대로 꾸밀 수 있을 것 같습니다.티스토리를 입문하시고, 조금 용기내어 스킨을 수정하려고 하면 도무지 알 수 없는 코딩들 때문에 어떻게 손을 대야 좋을지 몰랐다면, 지금은 이제 어떤 부분을 ..

HMTL 텍스트 왼쪽 가운데 오른쪽 위 중앙 아래 정렬 방법

WEB&SNS/HTML 친절한효자손 2018.10.16 00:04

오늘은 텍스트를 자유롭게 위치시키는 방법을 배워보았습니다. 생각보다 어렵지는 않습니다. 크게 세가지 정도만 기억하고 있으면 될 것 같습니다. 먼저 좌/우에 대한 요소는 text-align 으로 진행하시면 되며, 상/하 위치의 요소는 vertical-align 으로 진행하시면 됩니다. 태그 구성을 먼저 살펴보시면 다음과 같이 구성할 수 있겠습니다.이번에는 스타일을 인라인 방식으로 마크업을 했습니다. 헤드안의 스타일 안쪽에서 주는 내부 방식은 생략했습니..

CSS font 폰트 태그 요소 다양한 스타일 적용시키는 방법

WEB&SNS/CSS 친절한효자손 2018.10.15 00:06

오늘은 폰트 스타일을 적용하는 다양한 태그 요소들을 배웠습니다. 그리고 간단하게 줄여서 사용하는 방법에 대해서도 알게 되었습니다. 줄여쓰는 방법은 아직 익숙하지 않아서 자주 써야 기억에 남을 것 같아요. 확실한건 줄여서 표현하는 방법이 더 간단해서 코딩 무게를 줄임에 있어서 도움이 될 것 같습니다.지금 보시면, 빨간색 박스친 부분이 일반적으로 사용하는 폰트 스타일 요소들 입니다. 하나하나 설명을 하겠습니다.font-family → 글꼴을 지..

또 네이버 검색엔진 업데이트인가? 방문자 급감!

WEB&SNS/블로그연구 친절한효자손 2018.10.12 15:50

네이버로 유입되는 방문자수가 급감했습니다. 유입 경로를 살펴보니 네이버가 현저히 줄어들었습니다. 뭔가 또 업데이트를 한 모양입니다. 이번 일로 더욱 콘텐츠 개발이 절실해졌습니다.아시다시피 제 블로그에서 메인 콘텐츠는 티스토리에 대한 노하우를 공유하는 부분입니다. 애드센스 승인 방법이라던지 어디에 넣으면 좋은지에 대한 부분들이죠. 하지만 이건 저만의 노하우는 아닐 것입니다. 누구나 다 마음만 먹으면 할 수 있는 부분들 입니다. 오히려 더 잘하시는 분들..

HTML 가상 클래스 선택자 a 링크 다양한 스타일 변경 방법

WEB&SNS/HTML 친절한효자손 2018.10.12 00:05

오늘은 가상 클래스 선택자에 대해 배웠습니다. 보통 링크 태그인 a 요소에서 많이 볼 수 있습니다. 우리가 흔히 알고 있는 텍스트 기본 링크 색상은 파란색이며, 밑줄이 그어져 있습니다. 그리고 한번 방문한 링크는 보라색으로 바뀌어 있습니다. 이 부분을 설정할 수 있는데, 가상 클래스 선택자를 통해서 수정이 가능합니다.태그를 먼저 살펴보겠습니다. 위의 스크린샷처럼 작성하시면 됩니다. 각 부분의 설명은 다음과 같습니다.a:link → 링크가 걸린 텍스트..

HTML 내부스타일 CSS 선택자의 그룹화 방법

WEB&SNS/CSS 친절한효자손 2018.10.11 00:07

오늘은 각 요소에 클래스값을 부여하고, 이들을 모두 그룹화해서 일괄적으로 스타일을 적용시키는 방법에 대해서 배웠습니다. 여러개의 클래스값을 사용하는 경우에, 이들 중 일부 몇 클래스만 동일한 스타일을 적용시키고 싶다면 그룹으로 묶어서 관리할 수 있습니다.내부스타일로 적용한다고 했으니, head 안쪽에 style 영역을 따로 만들어 줍니다. 그리고 본문을 먼저 작업을 합니다. 지금 보시면 h1부터 h5까지 다양한 요소들로 텍스트를 작성했는데, 제목 부..

네이버 블로그 카페 검색이 모바일 VIEW(뷰) 카테고리로 통합되다

WEB&SNS/인터넷관련 친절한효자손 2018.10.09 02:06

언젠가는 이런일이 벌어질 줄 알았는데 생각보다 빨리 적용되었습니다. 네이버 검색 결과는 늘 블로그와 카페가 따로 있었는데 업데이트 되면서 이 부분이 이제 하나로 합쳐졌습니다. PC 버전에서는 해당되지 않고 모바일 검색에서만 적용되었습니다. 만약 VIEW 검색이 어느정도 안정권에 접어들고 이제 활성화가 된다면 PC버전으로도 적용되지 않을까 싶습니다.네이버측에서 말하는 VIEW는 한 마디로 더욱 정확하면서 실제 경험담을 바탕으로 된 문서임과 동시에, 사..

CSS 기초 : 스타일을 지정하는 선택자 사용 방법

WEB&SNS/CSS 친절한효자손 2018.10.09 00:02

이 부분은 정말 중요합니다. 여러분들께서 홈페이지를 만드시려 한다거나, 저처럼 티스토리 스킨을 제작해보려 하신다면 꼭 알고 있어야 하는 부분입니다. 꼭 스킨을 만들지 않더라도, 현재 사용하는 스킨이 편집 수정이 가능한 것이라면 원하시는대로 입맛대로 스타일을 바꾸거나 추가해서 사용할수도 있을 것입니다. 그러기 위해서는 꼭 오늘 이 글에서 다루는 부분을 이해하고 넘어가야 합니다.타입(태그) 선택자 / 아이디 선택자여기에서는 내부스타일 방식으로 진행합니다..

HTML div span 태그 요소 활용하여 메인화면 레이아웃 나누기

WEB&SNS/HTML 친절한효자손 2018.10.08 00:07

오늘은 정말 html 수업을 신청한 이유라 할 수 있는 메인화면을 구성하는 방법에 대해서 대략적으로 알아봤습니다. 디테일한 부분은 아직은 배우지 않고 있습니다. 지금의 머리로는 아직 멀었기 때문이죠. 기초를 탄탄히 다지고, 원리를 완전히 깨우친 다음 들어가도 늦지 않을 것 같습니다.메인화면의 기본 레이아웃을 구성하는 방법입니다. 이미 몇 번 앞시간에서 말씀드린적이 있는데, 큰 덩어리를 구성하는건 div, 그리고 작은 부분에 대한 그룹화는 span 이..

CSS 인라인 / 내부 / 외부 스타일 개념 및 적용 방법

WEB&SNS/CSS 친절한효자손 2018.10.07 00:03

예전에 한번 CSS 스타일에 대해서 언급한적이 있는데, 저도 언제 그랬는지 까먹었으니 다시한번 개념을 정리하고자 합니다. HTML에서 스타일을 적용하는 방법은 통상적으로 3개가 있습니다. 하나는 태그에 직접 스타일을 주는 인라인 방식, 두번째는, head 요소 안에 style을 지정하는 내부스타일 방식, 마지막은 아예 CSS 만 따로 모아둔 파일을 만들어서 외부에서 불러와서 적용하는 외부스타일 방식 입니다.지금 보시는 마크업 중 빨간색 표시가 된 부..

1
2
3
4
···
28

Sidebar

추천 글

Copyright © 친절한효자손 취미생활 All Rights Reserved

Designed by JB FACTORY

페이스북 공유하기
카카오톡 공유하기
카카오스토리 공유하기
트위터 공유하기