수업예고
이번 시간엔 CSS를 웹페이지에 삽입하고, 선택자와 속성이라는 것을 배웁니다. 쉽기 때문에 안중요해보이지만 사실은 가장 혁명적인 변화가 시작된 것인데...
속성의 기본
강의
소스코드
댓글
-
저도 아직 css를 배우는 입장이라 자세한건 모르지만, 어떤 언어들은 이 문장이 끝났다는 것을 표현하기위한 세미콜론을 붙일 수도 있고, 붙이지 않을 수도 있습니다.
예를들어서 java나 c++같은 언어들은 세미콜론을 붙이지 않으면 끝이 어디인지 알 수 없기 때문에 다음 줄을 읽기 시작하고, 그것은 문법적인 오류를 일으키며 컴파일 오류를 내뿜게 됩니다.
그러므로 java나 c++같은 언어들은 다음과 같은 선택적인 코딩이 가능하죠
int method_a() {
int a = 3; int b = 2; a++; b++;
}
만약 이런 한줄 코딩이 싫다면 다음과 같이 가능합니다
int method_a() {
int a = 3;
int b = 2;
a++;
b++;
}
이 둘의 실행 결과는 같습니다 (물론 출력을 안했기 때문에 사용자는 결과가 어떤지 지금 당장 알 수는 없는 노릇이겠지만요)
하지만 가끔 세미콜론이 옵션인 언어가 있는데요, Python이나 Lua등이 그런 것 같습니다.
이런 경우에는 더이상 문장이 적혀있지 않는 것 자체가 문장의 끝으로 인식되어 세미콜론이 필요가 없는 경우가 있습니다.
예를들어
i = 20
j = 10
i++
를 코드로 사용할 수 있습니다.
하지만 j = 20 j = 10 i++을 사용하게 될 경우 끝을 알 수 없어 오류가 발생하죠.
그럴 경우에 선택적으로 세미콜론을 붙여 다음과 같이 끝을 알려줄 수 있는 언어들도 있습니다. 아마 이 경우도 그런 것 같아요.
i = 20; j = 10; i++;
아마도 css도 세미콜론이 선택적이기 때문에 한줄만 존재할 경우 세미콜론을 붙이지 않아도 되는 것 같아요. -
감사합니다. ㅎㅎ
-
감사합니다! -
완료 -
완료
-
이고잉님 항상 감사합니다
덕분에 큰 꿈을 가지는 계기가 되었습니다
언젠가 꼭 한번 뵙고싶네요^-^ -
어디에 붙을 것 같은가요?ㅊ ^^; -
style="color:red;text-decoration:underline" 에는 세미콜론을 붙이지 않은 이유가 있나요?ㅠㅠ
-
스타일 태그와 스타일 속성. 최근에 배우면서 조금 헷갈렸는데 이해가 잘 되네요. -
완료
-
완료
-
완료
-
재밌다 진심
회사 끝나고 이걸 계속 보고 있다니! -
재밌어요.
-
감사합니다.^^
-
감사합니다
-
완료
-
완료
-
완료
-
좋은 선생님을 만나니, 수많은 노력들을 통해 최소한으로 정리된 내용을 아주 쉽고 빨리 배울수 있음에 너무 놀랍고 감사합니다^^ 더운 여름 지치지 않으시길 응원합니다.
-
감사합니다
-
감사합니다.
-
css style정말 신기합니다.
-
CSS 에서 선택자, 속성 알아가기! 오늘도 좋은 강의 감사합니다.
-
ㅎㅎ
하나하나 배워가는 재미가 있네욯 ㅎㅎㅎ -
selector 선택자 a 코드
{} declaration 선언자
color: property
red : value
어떤것이 어떤지 알면, 질문할 수 있음. 자신이 모르는 것이 어떤 것인지 알 수 있음. -
잘 듣고 갑니다. -
2018-06-09 잘 보고 갑니다!
-
좋습니다 좋아요
-
2018.05.03 잘 봤습니다 감사합니다~
-
Webpage에 CSS삽입방법
1. style tag (selector, declaration)
2. style property (selector is not needed because it's within tags)
Now we can search selectors or properties we want to use -
감사합니다 더 좋은 강의 부탁해요
-
감사합니다. 점점 알아가고 발전하는 것 같아서 기분이 너무 좋네요!
-
selector으로 body의 글을 모두 조정하면서 <style> tag를 활용해서 CSS 문법을 도입하고, 선언을 통해 디자인을 만들고; 글에서 직접 html속성으로 css의 효과를 내어 보기도 했네요! 선택자와 선언, 그리고 속성까지... 효율적 디자인!!
-
다른 방법 소개도 나올까요...?
인터넷에 찾아보니 아래와 같이도 똑같은 효과를 낼 수 있네요.
<style type"text/css">
a:link {text-decoration:none; color: white;}
a:visited {text-decoration:none; color: white;}
a:active {text-decoration:none; color: red;}
a:hover {text-decoration:none; color: red;} -
스타일 시트는 속성이 다양하기 때문에
일일이 속성을 다 기억해내기에는 어렵습니다.
그래서, 에디터는 자동완성을 해줄 수 있는 에디터를 쓰라고 말하고 싶네요.
브락켓이나 아톰으로 쓰시기를 권해 드립니다. -
알찬강의 잘 들었습니다. 감사합니다.
-
오늘도 강의 잘 듣고 갑니다.
-
<style>
a{
color : blue;
text-decoration : none;
}
</style> -
네 맞습니다. 다른 곳에 적어도 작동하지만 약속 위반이랍니다.
-
안녕하세요. 공부를 잘하고 있는데 질문이 있습니다.
원래 style 태그는 head와 body만 적용되는 것인가요?
p에는 적용이 자동으로 안되서 궁금하더라구요 ㅎㅎ
구글링을 해보니 약속으로 head랑 body만 적용되도록 했다고 하는데.. 맞나요? -
180209 감사합니다 -
180122 완료입니당! 재밌어옄!! 최소로 배워서 최대로 사용하겠습니당!
-
180119 감사합니다!
-
18-01-14 1일차 - 3번째 강의
수강완료!
선택자와 속성의 차이를 구분할 수 있게 되었습니다. ^_^ -
많이배우고가요 감사합니다^^
-
감사합니다. -
용어들이 낯설지만 잘 따라가겠습니다
-
감사합니다
-
지금 이 수업을 WEB1의 HTML에서 이어서 하면서 굳이 GitHub에 바로바로 수정해보고 있는데, HTML 안에 style=color:red; text:decoration:underline; 에서 띄어쓰기했더니 적용이 안되더라고요.^^;
조금 느리기는 하지만 따라가고 있습니다.^^
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
