웹 개발7 CSS 쉽게 배우기 | 소개 CSS 소개, 뜻, 그리고 사용 방법 알아보기 안녕하세요 오늘부터 CSS (Cascading Style Sheet)를 알아볼게요 그럼 먼저 CSS가 뭘까요? CSS는 Cascading Style Sheet의 약자로 HTML를 예쁘게 꾸밀수있게 도와주는 웹 스타일링 언어 입니다 HTML이 민낯이라면 CSS는 민낯에 화장을 하는거라고 생각하면 됩니다 좀더 자세하게 풀어보자면 C - Cascading(카스케이딩) 카스케이딩의 사전적 의미는 '아래로 흘러가다' 입니다 S - Style(스타일) 디자인측면에서의 스타일을 말합니다 S - Sheet(시트) 문서를 말합니다 이렇게 '아래로 흘러가는 디자인 스타일 문서' 라고 풀수 있습니다? 뭔 개소리인가 싶죠? CSS의 특성상 제일 마지막에 작성된 스타일이 HTML요.. 2020. 12. 29. HTML 쉽게 배우기 | 표 <table> 만들기 2 HTML 표()의 열/행에 제목 넣기, 그리고 표()의 구조 알아보기 안녕하세요, 오늘은 저번에 알아본 의 나머지 부분에 대해서 알아볼게요 우리가 아는 표에는 제목이 있어요 예를 들어서, 시간표에 각 행의 제목은 요일, 각 열의 제목은 수업시간 이렇게 각 행과 열에 제목이 있어서 우리가 표를 봤을 때 이게 어떤 내용의 표인지 쉽게 알아볼 수 있죠 저번 편에서 시간표를 만들 때 제목을 안 넣고 만들었는데 오늘, 저번편에서 만든 시간표에 제목을 넣어 볼게요 표의 행/열에 제목 넣기 표에서 제목은 를 사용해서 넣을 수 있습니다 와 마찬가지로 는 안에서 사용합니다 저번에만 든 시간표의 첫 번째 줄에 를 사용했었는데 그 를 로 바꿔주면 이렇게 글씨가 굵어지는걸 볼 수 있습니다 이렇게 글씨가 굵어 짐으로써 제목을 .. 2020. 12. 27. HTML 쉽게 배우기 | 양식 <form> 2 안녕하세요 오늘은 에서 사용되는 , , 그리고 에 대해서 알아볼게요 이력서 같은 양식을 보면 인적사항, 학력사항, 자격증, 등등 나눠져있는걸 볼수있죠 이렇게 각 섹션을 만들때 을 사용합니다. 의 정의는 양식에 비슷한 내용들을 그룹화 하는데 사용되는 요소입니다. 이 요소를 사용하면 요소 안에있는 내용 주위에 박스를 그립니다. 이 박스를 그림으로서 양식의 내용들이 어떤식으로 그룹됐는지 알아보기 쉬워집니다. 양식을보면 각 섹션에 제목이 있는걸 볼수있습니다 으로 양식의 내용들을 나누었으면, 로 나누어진 각 그룹에 제목을 붙일수 있습니다 이 요소는 의 제목을 정하는 요소이기 때문에 밖에서 사용하면 그 의미를 잃어버립니다. 그렇게 때문에 안에서 사용합니다. 종이 양식에서는 볼수 없지만, 온라인 양식에서는 한번쯤은 .. 2020. 12. 12. HTML 쉽게 배우기 | 목록 (ul, li, ol, dl, dt, dd) 안녕하세요. 오랜만이네요. 오늘은 HTML에서 목록을 만드는 방법을 알아볼 거예요. 목록하면 앞에 점으로 돼있는 목록, 그리고 숫자로 돼있는 목록이 있죠. 당연히 HTML에서도 이런 목록들을 아주 쉽게 만들 수 있습니다. 먼저 점으로 돼있는 목록을 볼게요. 점으로 되있는 목록을 만들 때 사용하는 태그들은 과 입니다. 은 Unordered List(언오더드 리스트)의 약자이고, 는 List Item(리스트 아이템)의 약자라고 생각하면 외우기 쉽죠. 언오더드 리스트, 말 그대로 정렬되지 않은 리스트죠. 리스트 된 내용이 어떤 순차적인 의미가 없는 경우에 사용합니다. 예를 들어 캠핑 갈 때 적는 준비물 리스트 같은 거죠. 그럼 HTML 코드를 볼게요. 안에 가 들어갑니다. 그럼 없이 만 사용하면 안 돼? 사용.. 2020. 10. 4. HTML 쉽게 배우기 | 텍스트 태그(p, b, strong, i, em, u, span) 저번 편에서 HTML 문서를 작성했어요. 혹시 기억이 잘 안 나시면 (웹개발 HTML | 쉽게 배우기 1) 편을 참고해주세요. 저번에 작성한 HTML 문서가 하얀 도화지라면 이제는 거기에 우리만의 밑그림을 그릴 차례입니다. 이번 편에서는 텍스트 위주의 태그들을 알아볼게요. 텍스트 태그: | | 저번 편에서 처음에 "안녕하세요"를 아무 태그 없이 써도 브라우저에서 보였죠? 그럼 제가 왜 자꾸 텍스트 태그를 언급할까요? 🤔 그건 바로 태그없이 쓴 텍스트는 아무 스타일을 할 수 없기 때문입니다. 🌟스타일에 대해서는 천천히 알아볼게요 먼저 를 살펴볼게요. 여기서 p 는 paragraph (문장)을 뜻합니다. 말 그대로 문장 또는 어떤 텍스트를 쓸 때 사용합니다. 여기서 텍스트는 글, 숫자, 그리고 특수문자 입니.. 2020. 9. 16. HTML 쉽게 배우기 | HTML 문서와 구조 저번 편에서 HTML에 대해 간단해 알아봤으니까 이젠 HTML을 직접 작성해 봐야겠죠. 먼저 바탕화면에 폴더를 하나 만들어 주세요. 폴더 이름은 맘대로. 이 폴더를 저번에 설치한 VSCode로 열어주세요. '새 파일' 만들기를 눌러서 index.html을 만들어 주세요 파일에 아무거나 쓰고 폴더에서 index.html을 열면 브라우저에 서 볼 수 있습니다. 이렇게 해도 브라우저에 보이지만, 이건 HTML이라고 할 수 없습니다. 저번에 HTML 문서는 태그와 요소들로 만들어진다고 했었죠. 그럼 HTML문서는 어떻게 작성해야 하나? HTML 문서를 만들기 위해선 HTML 문서의 구조를 먼저 갖춰야 합니다. HTML 문서의 구조를 보기 전에 "태그", "요소" 이 두 단 어가 많이 나왔죠. 태그는 뭐고 요소는.. 2020. 9. 13. HTML 쉽게 배우기| HTML 소개 웹 개발에 관심 있으신 분? 블로그를 더 잘 사용하고 싶어서 HTML을 배우고 싶으신 분? 목적이 뭐든 누구나 쉽게 배울 수 있는 HTML 블로그입니다. 개인적으로 서론이 긴 거 별로 안 좋아하는데, 그래도 HTML이 뭔지는 설명해야 될꺼같아서 간단하게 해 볼게요. HTML은 HyperText Markup Language (하이퍼텍스트 마크업 언어)의 약자입니다. 이게 무슨 말이냐면, 우리가 인터넷 할 때 사용하는 브라우저에 내용을 표시할 수 있는 문서를 작성할 때 사용하는 컴퓨터 언어입니다. 웹 사이트든 블로그든 브라우저에서 볼 수 있으려면 HTML 문서가 필요합니다. 이 문서는 태그와 요소들로 이루어져 있으며 이 요소들을 브라우저가 번역해서 우리가 보기 쉽게 표시해 줍니다. 좀 더 간단하게 설명하자면.. 2020. 9. 13. 이전 1 다음 반응형
