퍼블리싱 & 프론트엔드/html & CSS39 코드잇 학습일기 Day10. 링크 상대 주소, url 프래그먼트, 새 탭 열기, URI 스킴 오랜만에 다시 돌아온 코드잇 학습일기! 지난 주에도 한 개 쓰고 일주일만인데 엄청 오랜만인 것처럼 느껴진다. (왜지?) 오늘은 링크에 대해서 공부했다. 링크는 태그로 만들 수 있는데, 퍼블리싱을 공부해 본 적이 있다면 정말 필수적으로 공부해야 하는 기초 태그라고 할 수 있다. 링크를 사용하지 않고서는 웹사이트를 만드는 것이 거의 불가능하니까... 그래서 오늘 들은 강의들은 익숙한 내용들이 많았고, 다시 한 번 아는 내용들을 복습할 수 있었던 좋은 기회였다. 어제는 회사 업무가 바빠서 코드잇 강의를 듣지 못했다. 적어도 하루에 강의 한 개 정도는 듣자는 것이 목표이지만, 지키지 못했다고 해서 동기부여에 부정적인 영향을 끼치는 건 더 좋지 않을테니까... 정 못하겠으면 '바빠서 어쩔 수 없었어' 하고 주말에.. 2023. 4. 4. 코드잇 학습일기 Day9. HTML 개념과 구조, 코멘트(주석) 작성 방법 오랜만에 다시 돌아온 코드잇 학습일기~! 2월에 학습일기 챌린지에 참여해서 50,000 네이버 포인트를 받았다. 챌린지가 끝날 줄 알고 있었는데 3월에도 동일한 조건으로 학습일기 챌린지를 진행한다는 사실을 얼마 전에 알았다. 으아, 진작 알았으면 또 참여 하는건데 아쉽...ㅠㅠ 그래서 4월에도 챌린지를 하지 않을까 하는 기대와 그것을 준비하는 워밍업으로 3월 마지막주에 학습일기를 하나 써보기로 했다. 오늘 공부한 내용은 프론트엔드 과정 중 하나인 HTML 핵심 개념 토픽이다. 기초적인 내용이라 부담없이 복습하는 기분으로 듣고, 또 모르는 내용이 나오면 블로그에도 정리해두려고 한다. HTML 의미 HTML은 Hypertext Markup Language의 약자이다. 첫번째 단어인 하이퍼텍스트(Hyperte.. 2023. 3. 27. 내용에 꺽쇠 기호(<>) 텍스트 넣는 방법 화면에 태그와 같은 형태의 꺽쇠 기호() 넣는 방법에 대해서 알아보자. 다른 말로는 '홑화살괄호'라고도 부른다. html에서 내용을 작성할 때 html 태그와 같은 형태의 , , 등을 텍스트로 넣고 싶을 때가 있을 것이다. 예를 들어 아래와 같은 코드를 작성하였다고 가정해보자. html 태그의 종류 태그는 내가 표시하고 싶은 대상의 양쪽에 꺽쇠()를 사용해서 태그 이름을 적어주면 된다. 대표적인 태그들은 아래와 같다. - 태그는 heading의 약자로 제목이다. - 태그는 paragraph의 약자로 하나의 문단을 만들 때 쓴다. - 태그는 bold의 약자로 글씨를 굵게 표현한다. 위 코드를 화면으로 그리면 웹 브라우저에서 , , 태그를 설명하는 부분이 제대로 보이지 않는다. 이유는 이 텍스트들을 html.. 2023. 3. 9. 부모 속성을 상속하는 CSS 태그 모음 자식 태그에 특별한 속성이 지정되어 있지 않으면 자동으로 부모 속성을 물려받아 스타일링되는 태그들이 있다. color font-family font-size font-weight line-height list-style text-align text-indent text-decoration letter-spacing opacity visibility 보통 글자, 정렬과 관련된 css 태그들이 그대로 상속되는 듯 하다. 그리고 예외적으로 태그에는 color 속성이 상속되지 않는데, 상속되지 않는 속성을 강제로 상속시킬 때는 해당 css에 inherit 라는 속성값을 사용하면 된다. 더해서, 자식의 자식 요소에는 스타일링이 적용되지 않는다는 것도 알아두자. 구글 사이트로 이동하고 싶다면 여기를 클릭하세요! 2021. 8. 17. CSS 우선 적용 순서 같은 요소에 다른 CSS 속성이 중복 설정되어 있다면 어떤 것을 우선순위로 적용될까? 아래와 같은 순서로 우선순위가 적용된다. 속성값 뒤에 !important 가 붙어있는 속성 인라인 스타일(html 파일에서 스타일 직접 지정)로 적용되어 있는 속성 선택자에 id가 쓰인 속성 class, attribute, pseudo-class로 지정한 속성 태그 이름으로 지정한 속성 부모 요소에 의해 상속된 속성 이때 만약 똑같은 선택자가 아래에 반복해서 나오면 이전의 것을 덮어쓰게 된다. 이전의 것을 덮어쓰지 않으려면 !important를 사용해 주어야 한다. 안녕? 친구하지 않을래? 2021. 8. 17. CSS 선택자 모음 예전에 한번 간단하게 정리했던 적이 있는 CSS 선택자... 그 당시에 빠뜨린 것도 있고 해서 이번 기회에 더 자세히 정리해 보았다. 태그 이름 태그 이름은 그냥 이름만 기재해서 바로 스타일링이 가능하다. 해이나 월드 안녕, 친구하지 않을래? 클래스 & 아이디 클래스는 마침표(.)로 시작, 아이디는 샾(#)으로 시작한다. 해이나 월드 안녕, 친구하지 않을래? 자식 & 직속 자식 자식과 직속 자식은 css로 스타일링 해줄때는 아래와 같이 표기한다. 아래 예제에서 자식에 스타일링을 한 경우 해당 박스 안에 태그를 가지고 있는 모든 요소에 적용되는 반면, 직속 자식에 스타일링을 한 경우 다른 태그로 한번 더 감싸진 태그는 스타일링이 적용되지 않는다. 나는 box의 직속 자식입니다. 나는 box의 직속 자식은 .. 2021. 8. 16. 배경이미지(background) 관련 CSS 모음 오늘은 광복절 대체휴무일이다. (출근 안 하는 날+_+) 그래서 새벽에 CSS를 정리하는 블로그 포스팅을 하고 있다 (후후훗-_-v) 이번 포스팅에서는 배경이미지(background)와 관련된 CSS 속성을 알아보도록 하겠다. background-color 배경색으로 색상을 지정하고 싶을 때 사용한다. HEX, RGB, 색 이름 직접 지정 모두 가능하다. 만약 배경 이미지와 중복으로 사용한다면, 이미지의 투명한 부분이 있을 경우에 그 부분을 통해 해당 색상을 확인할 수 있다. background-image 배경에 이미지(사진)를 넣고 싶을 때 사용한다. 아래와 같이 경로를 사용하여 지정하면 된다. 미리 준비한 배경이미지를 넣어 보았는데 div의 너비와 폭이 100px로 지정되어 있어 배경이미지가 잘려 보.. 2021. 8. 16. 박스 사이즈를 결정하는 box-sizing : content-box | border-box; 오늘은 박스 사이즈를 결정하는 box-sizing 태그에 대해서 알아보려고 한다. 모르고 있어도 치명적인 문제는 발생하지 않지만, 알고 있다면 분명 꿀팁이 될 것이다. 문제 인식 아래와 같이 Hello world! 라고 적혀있는 div 박스 하나를 만들었다. 그리고 해당 박스의 사이즈를 가로 200px, 세로 100px로 설정하고 3px 두께의 테두리와 20px 내부 여백도 주었다. 그리고 나서 결과를 확인해보면, 보여지는 박스의 사이즈가 내부 여백(padding), 테두리(border) 사이즈까지 더해져서 초기에 설정해준 것보다 커져 있다. - 가로값 : width 200px + (padding 20 * 2) + (border 3 * 2) = 200 + 40 + 6 = 총 246px - 세로값 : he.. 2021. 8. 7. margin: 0 auto; 가운데 정렬이 되지 않을 때 가운데 정렬을 하는 방법은 여러가지가 있는데 나는 그 중에서도 text-align:center; 와 margin: 0 auto;를 가장 많이 사용하는 편이다. 그런데 간혹 margin:0 auto;를 적용해도 가운데 정렬이 되지 않을 때가 있다. 이러한 상황에서 체크해 볼 수 있는 세가지 방법에 대해서 소개하도록 하겠다. margin: 0 auto; 가운데 정렬이 되지 않을 때 해결방법 1. 가장 첫번째로 해야 할 일은 선언이 제대로 되었는지 확인해보아야 한다. 2. auto는 자동으로 사이즈를 설정해주는 것이다. 그러므로 가로폭의 사이즈를 정확하게 인식할 수 있어야 정렬이 가능하다. margin: 0 auto; 가 반응하지 않을 때에는 해당 영역의 가로 사이즈가 제대로 설정되어 있는지 확인해보고, 만약.. 2021. 8. 2. CSS로 색상 표현하기(HEX, RGB, 색 이름) html 파일에 사용된 텍스트나 div 배경 등에 색상을 사용할 때는 CSS를 이용하면 된다. CSS에서 색상을 표현하는 방법 세가지를 포스팅으로 정리하려고 한다. 색 이름 사용하기 우리가 사용하는 색상 이름을 바로 입력하여 사용이 가능하다. p { color: red; background-color: white; } CSS에서는 140가지의 색상을 이름으로 지원한다고 한다. 아래 url을 클릭하면 지원하는 색상표를 확인할 수 있다. 그러나 이 방법은 black, white가 아닌 이상 색상을 세밀하게 원하는 대로 조절할 수 없어서 디자이너들은 거의 사용하지 않는다. 이를 보완하여 더 다채로운 색상을 표현하는 방법은 HEX, RGB를 사용하는 것이다. https://www.w3schools.com/css.. 2021. 7. 22. 이전 1 2 3 4 다음
