본문 바로가기

css강의

(5)
웹퍼블리싱 강의 및 홈페이지 제작 유틸 모음 홈페이지 제작을 위해 필요한 3박자. 뼈대가 되는 HTML과 인테리어를 담당하는 CSS, 유동적인 홈페이지를 위해 필수적인 JS는 차례대로 유기적으로 흘러가야 합니다. 기획, 디자이너, 개발자 할 거 없이 웹에 관련된 업무를 하는 직군이라면 알아야 할 업무 소통을 위해 필수적인 다양한 웹퍼블리싱에 대한 내용을 담고 있으며, 학습의 과정과 제작에 필요한 유틸리티를 한 데 모아봤습니다. 또한 티스토리의 스킨을 수정하기 위해 각각의 코드 요소들이 웹 상에서 어떻게 돌아가는지를 보여주고 있기 때문에 기초에 관련된 각각의 내용을 숙지한다면 티스토리 블로그 또한 원하는 대로 <span style="color: #333333; text-align: start..
CSS 소개와 사용방법 (CSS란 무엇인가?) CSS 소개 첫 단추 페이지를 포스팅하기 전에 잠시 CSS가 태어나게 된 일화를 간단히 소개 후 넘어가도록 할게요 먼저 CSS는 Cascading Style Sheets의 약어로 사전적 용어로 풀이해 나타내면 계단식 스타일 시트라고 불립니다. 홈페이지 제작을 했었던 1,2세대 초기 웹디자인과 개발자들은 CSS라는 표준형 언어가 생기기 전에는 웹페이지 폰트에 컬러를 주거나 단일 페이지나 공용 페이지에 특수한 효과를 주고 싶을 때, 모든 페이지에 일일이 스타일 용어를 적용시키거나 개발자를 통한 프로그래밍적 언어로 제어를 해야 했습니다. ​ 이때 당시에는 웹디자이너가 추구하는 미적 효과와 그것들을 실행해야 하는 개발자 사이에 마찰이 불가피했었는데요, 페이지가 늘어나면 늘어날수록 일일이 대입해 적용해야 했기 때..
홈페이지 폰트 사이즈 수정하기 (font-family,size,weight) 홈페이지의 폰트 제어는 link rel로 html에 외부스크립트로 스타일을 불러와서 링크하는것을 기본으로 원하는 폰트를 적용해 주었다면 css의 스타일로 본문에 적용되는 다양한 폰트들을 상세하게 제어할 수 있습니다. ​ 홈페이지에 적용되는 폰트는 운영체제와 브라우저의 특성을 고려해 하나의 폰트만을 연결해주는 것을 기본으로 잡지 않으며, 첫번째 적용되는 폰트들이 문제가 생길 경우에 순차적으로 적용될 수 있도록 예비폰트들을 지정해 주어야 합니다. 이것을 "폴백 (fallback)시스템" 이라 부릅니다. font-family 텍스트의 글꼴을 모아놓은 명령어로 위의 폴백을 염두에 두어 몇개의 폰트를 세팅 해 줍니다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도하는 식으로 진행되며, 모든 글꼴을 ..
css 홈페이지 폰트 정렬 및 제어하기 홈페이지를 제작할 때나 html 코드를 이용한 본문 컨텐츠를 꾸밀 때, 가장 필수적인 요소인 텍스트 제어는 색상을 입히거나 빼는 등의 효과는 물론 제어 속성으로서 정렬, 들여 쓰기, 자간 설정 등을 조절할 수 있으며, 디테일하게 제어하면 컨텐츠의 완성도가 높아져 보이는 장점이 있습니다. 크게는 3가지로 글씨, 문단, 문장을 제어하게끔 되어있는 텍스트 속성은 복합적 css를 동시에 사용할 수도 있습니다. text-aline (글씨 정렬) 텍스트가 시작하는 위치 지점을 제어할 수 있는 속성으로 크게는 4가지로 나뉘는데, 오른쪽, 왼쪽, 가운데, 문단 정렬로 나뉠 수 있습니다. 또한 메인 정렬에 따라 전체 속성의 기본값이 바뀔 수 있으니 이 점을 유의하여 사용해야 합니다. [기본코드] text-align: l..
CSS 소개와 사용방법 (CSS가 뭔가요?) 🎨 CSS 소개 첫 단추 페이지를 포스팅하기 전에 잠시 CSS가 태어나게 된 일화를 간단히 소개 후 넘어가도록 할게요 ​ 먼저 CSS는 Cascading Style S heets의 약어로 사전적 용어로 풀이해 나타내면 계단식 스타일 시트라고 불립니다. ​ 홈페이지 제작을 했었던 1,2세대 초기 웹디자인과 개발자들은 CSS라는 표준형 언어가 생기기 전에는 웹페이지 폰트에 컬러를 주거나 단일 페이지나 공용 페이지에 특수한 효과를 주고 싶을 때, 모든 페이지에 일일이 스타일 용어를 적용시키거나 개발자를 통한 프로그래밍적 언어로 제어를 해야 했습니다. ​ 이때 당시에는 웹디자이너가 추구하는 미적 효과와 그것들을 실행해야 하는 개발자 사이에 마찰이 불가피했었는데요, 페이지가 늘어나면 늘어날수록 일일이 대입해 적용..