The Curious Adventurer's Journey The Curious Adventurer's Journey

HTML 문서에서 스타일을 적용할 때, 여러 가지 방법으로 스타일을 지정할 수 있습니다. 하지만 이렇게 지정된 스타일들이 충돌할 경우, 어떤 스타일이 적용될까요? 바로 스타일 적용 우선순위에 의해 결정됩니다.  1. !important 선언important 라는 영단어는 '중요한, 영향력이 있는' 이라는 의미를 가지죠. 그 말처럼, !important 선언이 들어가면 스타일에서 가장 높은 우선순위를 갖게 됩니다. 그렇기 때문에 남용해서는 안되고, 정말 중요할 때만 사용되어야 합니다.p { color:red !important;}  2. 인라인 스타일html 파일 내 스타일 속성 직접 부여하는 방식으로, 스타일 태그 내 부여와는 다릅니다. 다른 스타일보다는 우선 적용되지만, 스타일과 html 코드가 섞여 ..

html에서 단위는 여러 가지가 있습니다. 그러나 그 중에서 주로 사용하는 것은 퍼센트(%)와 픽셀(pixel; px) 입니다. 사용 예시는 위와 같은데,px은 그 값이 고정된 절대적인 값이 정해져 있고,%는 부모 태그의 값을 기준으로 상대적인 값을 갖는다는 것을 숙지해두면 좋을 것 같습니다.

html 파일에 스타일 요소를 추가할 수도 있지만,그렇게 계속해서 추가하다 보면html 파일의 구조를 알아보기 어려울 정도로 스타일 요소가 늘어나버리게 됩니다. 이런 경우에 두 가지 방법으로 스타일 요소를 분리할 수 있습니다.첫 번째 경우는 스타일 요소를 동일 파일 내 style 태그 안에 두는 방법이고,두 번째 경우가 오늘 소개하려는 외부 스타일 시트 입니다.   1. 먼저 작업하던 html 파일과 같은 위치나 다른 위치에 확장자가 css인 파일을 생성합니다.저는 이런 식으로 폴더를 생성해서 그 안에 css 확장자 파일을 만들었습니다. 경로는 편하신 곳으로 하셔도 좋습니다.  2. 만든 css 파일에 사용할 스타일을 작성합니다.저는 임의로 이렇게 작성했습니다.  3. 이제 기존 html에서 css 파일..

mark 태그는 '표시하다, 기록하다'는 뜻을 가진 영어 단어로,형광색으로 글자 배경색을 칠하듯이,일반적으로 노란색으로 글자 배경색을 칠하는 태그입니다.  mark 태그는주로 시각적으로 강조를 하기 위해 사용됩니다.특정 어휘를 다른 어휘들과 분리되어 강조하고 싶거나,검색된 특정 어휘에 색칠하여 보여주고 싶거나,사용자가 특정한 단어를 클릭할 때 등, 일반적인 다른 글자들과 강조하여 표시하기 위해 사용됩니다. 또한,기본적으로는 노란색으로 칠해지지만, CSS를 활용하면 다른 색으로 변경할 수 있습니다.  이상입니다.  비슷한 기능을 하는 태그 보러가기 https://free-weave.tistory.com/42 "u" 태그u 태그는 글자에 underline(밑줄) 속성을 추가하는 태그입니다.  시각적인 효과만..

u 태그는 글자에 underline(밑줄) 속성을 추가하는 태그입니다.  시각적인 효과만 있고, 특별히 의미는 없어서CSS를 활용하거나 더 의미있는 태그를 사용하는 것이 권장됩니다. 이상입니다.  비슷한 태그 보러가기https://free-weave.tistory.com/41 "i, em" 태그i는 italic의 i이고, em은 강조(emphasis)의 e를 의미합니다.  i 태그와 em 태그는 위와 같이 글자를 '기울임'이라는 시각적인 효과에 있어서는 차이가 없습니다. 그래서 용도에 맞게 분리되어 사용되free-weave.tistory.com https://free-weave.tistory.com/40 "b, strong" 태그글자를 강조하는 태그로, b 태그와 strong 태그가 있습니다. b 태그는..

i는 italic의 i이고, em은 강조(emphasis)의 e를 의미합니다.  i 태그와 em 태그는 위와 같이 글자를 '기울임'이라는 시각적인 효과에 있어서는 차이가 없습니다. 그래서 용도에 맞게 분리되어 사용되어야 합니다. 1. i 태그i 태그는 주로 외국어, 기술용어, 책제목 등 시각적인 효과를 위해 많이 사용되어집니다. 2. em 태그em 태그는 주로 글자의 중요한 특정 지점, 중요한 단어를 강조할 때 많이 사용되어집니다. 또한 웹 접근성이 좋은 태그입니다. 3. 결론시각적으로 동일한 효과를 가지고 있으므로, 웹 접근성이 좋은 em 태그를 쓰는 것이 더 권장됩니다.  이상입니다.   비슷하게 웹 접근성이 좋은 태그 알아보기https://free-weave.tistory.com/40 "b, str..

글자를 강조하는 태그로, b 태그와 strong 태그가 있습니다. b 태그는 bold의 b이고, strong은 영단어 그대로의 의미를 가지고 있습니다. 두 태그 모두 시각적으로는 완전히 동일한 효과를 가지고 있습니다. 아래를 보실까요 위에는 b 태그를, 아래에는 strong 태그를 작성했습니다. 시각적으로 도저히 차이를 둘 수 없을 만큼 똑같은 효과를 가지고 있습니다. 바로 글자가 진해진다는 것이죠. 의미적으로는 차이가 있습니다. strong 태그는 이름 그대로, 중요한 강조점을 위해 사용되어지는 태그입니다. 반면, b 태그는 시각적으로 강조 표시되는 것 이외 특이점은 없습니다. 그리고 시각적 효과를 줄 때는 css를 쓰거나 style을 적용하는 것이 더 효과적입니다. 이것을 볼 때, 강조의 표현으로는 ..

span 은 범위나 간격을 의미하는 영단어 그대로의 의미로 사용되며,강조되지 않은 표현입니다강조 표현을 써주세요강조되지 않은 표현입니다 형식으로 작성할 수 있습니다.  span 태그 안에 보라색을 적용한 화면입니다. 위와 같이 보통 다른 태그 안에 특별히 강조하기 위해서, 혹은 다른 디자인을 적용하기 위해서 span 태그를 사용합니다. span 태그 그 자체에 특별히 의미가 부여되어 있지 않기 때문에, 달리 사용할 태그가 있다면 그 태그를 우선으로 사용하는 것이 권장됩니다.  이상입니다.